第二十章 案例TodoList之动态数据

我们之前已经实现了静态的组件拆分，既然是静态说明数据就是死的，显然这不是我们需要的结果，之前我们学习了React组件，知道组件里面的状态数据驱动了页面的显示，每个组件都有属于自己的状态数据。接下来我们改造组件使得组件有自己的状态数据。

分析组件之间的关系

首先我们知道Todolist案例的主要功能是：通过Header组件输入任务项添加任务，在由List组件展示任务项。

思考1：Header组件和List组件可以通信吗？现目前好像不能实现兄弟组件的通信。

思考2：Header组件和List组件可以和谁通信？好像是App组件，因为它们是父子关系。

思考3： 我们可以通过App组件建立Header和List组件之间的数据交互吗？好像可以。

根据上图以及我们所学知识，可以知道父子组件可以通过props标签属性来进行组件之间的通信。那么我们可以让父组件的状态数据成为一个公共数据，可以同时传递给Header组件和List组件使用。

尝试编写代码

• App组件

import React, { Component } from 'react'
import Header from "./components/Header"
import List from "./components/List"
import Footer from "./components/Footer"
import "./index.css"export default class App extends Component {// 定义列表的初始状态数据state = {todos: [{id:'001',name:'吃饭',done: true},{id:'002',name:'睡觉',done: true},{id:'003',name:'写代码',done: false},]}render() {const { todos } = this.statereturn (<div className="todo-container"><div className="todo-wrap"><Header/><List todos={todos}/><Footer/></div></div>)}
}

我们在App组件中定义了任务列表的初始状态数据，并把该数据使用props的方式传入了List组件。

• List组件

import React, { Component } from 'react'
import Item from '../Item'
import "./index.css"
export default class List extends Component {render() {const {todos} = this.propsreturn (<ul className="todo-main">{todos.map(todo=>{return <Item key={todo.id} {...todo}/>})}</ul>)}
}

我们在List组件中接收到了由App组件传递的数据，且遍历该数据，把单个任务项的数据以批量传递的形式{...todo}交给组件Item。

• Item组件

import React, { Component } from 'react'
import "./index.css"
export default class Item extends Component {render() {const {name,done} = this.propsreturn (<li ><label><input type="checkbox" defaultChecked={done}/><span>{name}</span></label><button className="btn btn-danger" style={{display:"none"}}>删除</button></li>)}
}

在Item组件接收到props数据后，拿到name值放到span标签中进行展示，done值交给复选框的defaultChecked属性，用于展示任务项的默认状态是否被选中。

• 查看效果

至此我们就完成数据在组件的动态传递，他们的传递方式是通过props。