[程式碼片段][React速成班]從TodoList範例學習React(2)-透過實作TodoItems學習props, 文章網址:https://dotblogs.com.tw/wellwind/2016/03/18/react-tutorial-6-props
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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