this.props对象的属性与组件的属性一一对应,但是有一个例外,就是this.props.children属性。它表示组件的所有子节点。
var NotesList = React.createClass({
render: function(){
return(
<ol>
{
React.Children.map(this.props.children,function(child){
return <li>{child}</li>;
})
}
</ol>
);
}
});
ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NoteList>,
document.body
);
上面代码的NoteList组件有两个span子节点,它们都可以通过this.props.children读取。
这里需要注意,this.props.children的值有三种可能:如果当前组件没有子节点,它就是undefined;如果有一个子节点,数据类型就是object;如果有多个子节点,数据类型就是array。所以处理this.props.children的时候要小心。