Demo04 - Chidren属性 by zuojj at 30 Jun 2016
HTML
<div id="olist"></div>
JAVASCRIPT
var ListItem = React.createClass({
render: function() {
return <li>{this.props.data}</li>
}
});
var OrderList = React.createClass({
// item: {"type":"span","key":null,"ref":null,"props":{"children":"Monday"},"_owner":null,"_store":{}}
// 用 React.Children.map 来遍历子节点,而不用担心 this.props.children 的数据类型是 undefined 还是 object
render: function() {
return <ol>{React.Children.map(this.props.children, function(item) {
return <ListItem data={item.props.children}/>
})}</ol>
}
});
ReactDOM.render(
<OrderList>
<span>Monday</span>
<span>Tuesday</span>
<span>Wednesday</span>
<span>Thursday</span>
<span>Friday</span>
<span>Saturday</span>
<span>Sunday</span>
</OrderList>,
document.getElementById('olist')
);