首页>demo04

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')
);