todoMvc-3step原始碼
todoMvc-3step演示
上一張主要介紹了下React如何進行雙向繫結以及如何生成一個元件,我們第三步的目標就是需要把之前做的內容抽象出更細的元件,這樣便於解耦,各個元件各司其職,互不干擾。
先看下抽象後src/components
下的目錄
app.js
修改過後的內容:
import React from 'react'
import ReactDOM from 'react-dom'
import TodoHeader from './TodoHeader' // 引入TodoHeader元件
import TodoMain from './TodoMain' // 引入TodoMain元件
class App extends React.Component { // 定義元件,繼承父類
constructor() {
super()
this.state = {
todos: []
}
}
addTodo(item) { // 新增了新增todo事項的方法
this.state.todos.push(item)
this.setState({todos: this.state.todos}); //設定狀態
}
render(){
return (
<div className="todo-wrapper">
// 將原內容寫在元件中並引入進行渲染
// 把addTodo方法傳遞到TodoHeader元件中,bind(this)是為了把該React例項繫結到this上
<TodoHeader addTodo={this.addTodo.bind(this)}/>
// 把 state.todos 傳入到TodoMain 中
<TodoMain todos={this.state.todos}/>
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById('app'))
複製程式碼
TodoHeader
:
import React from 'react'
class TodoHeader extends React.Component {
// 繫結鍵盤迴車事件,新增新任務
handlerKeyUp(e) {
if(e.keyCode == 13) { // enter鍵的 keyCode 為13
let value = e.target.value;
if(!value) return false;
let newTodoItem = {
text: value,
isDone: false
};
e.target.value = '';
this.props.addTodo(newTodoItem) // 通過 this.props 來呼叫父元件傳遞過來的addTodo方法
}
}
render(){
return (
<div className="todo-header">
<input onKeyUp={this.handlerKeyUp.bind(this)} type="text" placeholder="請輸入你的任務名稱,按Enter鍵確認"/>
</div>
)
}
}
export default TodoHeader // 將TodoHeader匯出,否則父元件無法匯入
複製程式碼
TodoMain
修改後內容:
import React from 'react'
import TodoItem from './TodoItem'
class TodoMain extends React.Component {
render(){
if(this.props.todos.length == 0) {
return (
<div className="todo-empty">恭喜您,目前沒有待辦任務</div>
)
} else {
return (
<ul className="todo-main">
{
this.props.todos.map((todo,index) => {
//{...this.props} 用來傳遞TodoMain的todos屬性和delete、change方法。
return <TodoItem text={todo.text} isDone={todo.isDone} index={index} {...this.props} key={index}/>
})
}
</ul>
)
}
}
}
export default TodoMain
複製程式碼
TodoItem
:
import React from 'react'
class TodoItem extends React.Component {
render() {
let className = this.props.isDone?'task-done':''
return (
<li>
<label>
<input type="checkbox"/>
<span className={className}>{this.props.text}</span>
</label>
</li>
)
}
}
export default TodoItem
複製程式碼
這一步時webpack
先編譯,然後開啟index.html,如果頁面像下圖這樣的odoMvc-3step演示,那就說明成功了。
做到這裡應該對react元件元件化的有個大概的瞭解了。新手們基本可以對著原始碼按照這種思路繼續做下去。以完善【刪除】、【清除已完成】、【未完成數量】等功能了,由於程式碼類似,故不做贅述了,不太清楚的地方可以參考原始碼。
React+webpack從0到1開發一個todoMvc(一) React+webpack從0到1開發一個todoMvc(二) React+webpack從0到1開發一個todoMvc(四) React+webpack從0到1開發一個todoMvc(五)