[程式碼片段][React速成班]從TodoList範例學習React(2)-透過實作TodoItems學習props, 文章網址:https://dotblogs.com.tw/wellwind/2016/03/18/react-tutorial-6-props

todo_list.jsx

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

var TodoItems = React.createClass({
    render: function() {
        var displayItems = this.props.items.map(function(item) {
            // return (<li key={item.id}>{item.data}</li>);
            return (<TodoItem key={item.id}>{item.data}</TodoItem>);
        });

        return (
            <div>
                <ul>
                    {displayItems}
                </ul>
            </div>
        );
    }
});

var AddTodoForm = React.createClass({
    render: function() {
        return (
            <div>我用來增加TodoItem</div>
        );
    }
});

var TodoList = React.createClass({
    render: function() {
        var todoItems = [
                { id: 1, data: "Item 1" },
                { id: 2, data: "Item 2" }];
        return (
            <div className="todoList">
                <h1>我是一個TodoList容器</h1>
                <h2>我組合了TodoItems以及AddTodoForm兩個元件</h2>
                <TodoItems items={todoItems}/>
                <AddTodoForm />
            </div>
        );
    }
});

ReactDOM.render(
    <TodoList />,
    document.getElementById("content")
);