<body>
<!-- React 真实 DOM 将会插入到这里 -->
<div id="example"></div>
<!-- 引入 React -->
<script src="src/libs/react.js"></script>
<!-- 引入 JSX 语法格式转换器 -->
<script src="src/libs/JSXTransformer.js"></script>
<script src="src/libs/jquery.js"></script>
<!-- 注意：script 需要注明 type 为 text/jsx 以指定这是一个 JSX 语法格式 -->
<script type="text/jsx">
var NoteList = React.createClass({
render: function () {
return (
<ul>
<li>{this.props.children}</li>
</ul>
)
}
})
React.render(
<NoteList>
<p>11111</p>
<p>2222</p>
</NoteList>
,
document.getElementById('example')
)
</script>
this.props对象的属性与组件的属性一一对应，但是有一个例外，就是this.props.children属性。它表示组件的所有子节点。
上面代码的NoteList组件有两个span子节点，它们都可以通过this.props.children读取
<body>
<!-- React 真实 DOM 将会插入到这里 -->
<div id="example"></div>
<!-- 引入 React -->
<script src="src/libs/react.js"></script>
<!-- 引入 JSX 语法格式转换器 -->
<script src="src/libs/JSXTransformer.js"></script>
<script src="src/libs/jquery.js"></script>
<!-- 注意：script 需要注明 type 为 text/jsx 以指定这是一个 JSX 语法格式 -->
<script type="text/jsx">
var NoteList = React.createClass({
render: function () {
return (
<ul>
{
this.props.children.map(function (children) {
return <li>{children}</li>;
})
}
</ul>
)
}
})
React.render(
<NoteList>
<p>11111</p>
<p>2222</p>
</NoteList>
,
document.getElementById('example')
)
</script>
</body>
这里需要注意，只有当子节点多于1个时，this.props.children才是一个数组，否则是不能用map方法的，