[程式碼片段][React速成班]從TodoList範例學習React(2)-透過實作TodoItems學習props, 文章網址:https://dotblogs.com.tw/wellwind/2016/03/18/react-tutorial-6-props
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") | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment