Skip to content

Instantly share code, notes, and snippets.

@wellwind

wellwind/todo_list.jsx

Last active Aug 1, 2017
Embed
What would you like to do?
[程式碼片段][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