首页>demo03

Demo03 - 简单组件封装 by zuojj at 29 Jun 2016

HTML

<div id="olist"></div>

JAVASCRIPT

var weekMap = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];

var ListItem = React.createClass({
    render: function() {
        return <li>{this.props.data}</li>
    }
});

var OrderList = React.createClass({
    render: function() {
        return <ol>{this.props.data.map(function(text, index, arr) {
            return <ListItem key={index} data={text} />
        })}</ol>
    }
});

ReactDOM.render(
    <OrderList data={weekMap} />, 
    document.getElementById('olist')
);

/**
 + Warning:
 + react.js:19500 Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using <ul>. See https://fb.me/react-warning-keys for more information.
 + 解决方案参见警告中的链接
 */