父传子:
父组件创建数据传递:
//初始化状态
state = {
todos: [
{ id: '001', name: '吃饭', done: true },
{ id: '002', name: '睡觉', done: true },
{ id: '003', name: '打代码', done: false },
{ id: '004', name: '逛街', done: false }
]
}
render() {
const { todos } = this.state
return (
<div className="todo-wrap">
<List todos={todos} />
</div>
)
}
子组件接收使用:
对props进行类型限制需要引入
import PropTypes from 'prop-types'
//对接收的props进行:类型、必要性的限制
static propTypes = {
todos: PropTypes.array.isRequired,
}
render() {
const { todos } = this.props
return (
<ul className="todo-main">
{
todos.map(todo => {
return (
<li >
<span>{todo.name}</span>
</li>
)
})
}
</ul>
)
}
子传父:
需要通过事件传递
在子组件触发事件
//将todoObj传递给App
this.props.addTodo(todoObj)
父组件接收:
//addTodo用于添加一个todo,接收的参数是todo对象
addTodo = (todoObj)=>{
}
render() {
return (
<div className="todo-container">
<Header addTodo={this.addTodo}/>
</div>
)
}