您的位置：首页 > Web前端 > React

从零开始学React(2)——React语法

2016-05-16 00:00 691 查看
前一章内容是从零开始学React(1)—— http://my.oschina.net/u/2608629/blog/675631

第一章，我们会使用render()方法了，这里。我们做更深入的研究。

先上demo

[code=plain]<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="hello_name"></div>
<script type="text/babel">
var names=["Joey","Harry","Roxie"];
ReactDOM.render(
<div>
{names.map(function (name){
return <div>Hello {name}!</div>
})}
</div>,
document.getElementById("hello_name")
)
</script>
</body>
</html>

上图运行结果如下:



在JXS语句中，有2个标签我们要熟练掌握。<>和{}。<>这个符号是html中最经常遇到的，代表标签。在JXS中，所有被<>括起来的内容。都会被解析为HTML内容。

相对的{},这个符号被javascript解析，{}这个符号也挺好玩的，EL表达式，Jquery，angular等需要替换变量的地方使用的都是这个。

就像HTML中，内容嵌套一样，在JXS语句中，<>和{}也是相互嵌套。然后生成了我们想要的HTML页面。

map():是一个遍历方法，在React中，可以把数组的一个个元素取出来。

接下来的一章是从零开始学React(3)——数组 http://my.oschina.net/u/2608629/blog/675799
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航