五、this.props.children
最后更新于：2022-04-01 03:42:15
## 五、this.props.children
this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点（查看 [demo05](https://github.com/ruanyf/react-demos/blob/master/demo05/index.html)）。
> ~~~
> var NotesList = React.createClass({
> render: function() {
> return (
> <ol>
> {
> this.props.children.map(function (child) {
> return <li>{child}</li>
> })
> }
> </ol>
> );
> }
> });
>
> React.render(
> <NotesList>
> <span>hello</span>
> <span>world</span>
> </NotesList>,
> document.body
> );
> ~~~
上面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取，运行结果如下。
这里需要注意，只有当子节点多余1个时，this.props.children 才是一个数组，否则是不能用 map 方法的， 会报错。