react组件之间的通信大概有三种
1.父组件传递数据给子组件
可以通过props将值传递给子组件
2.子组件传递给父组件
可以通过回调函数的方式,将子组件的值传回父组件
<Header addTodo={this.addTodo}/>
<List todos={todos} updateTodo={this.updateTodo}
<Footer todos={todos} checkAllTodo{this.checkAllTodo}/>
回调函数
addTodo = (TodoObject)=>{
//追加一个todo
const newTodoList = [TodoObject,...this.state.todos]
//更新状态
this.setState({todos:newTodoList})
}
通过在子组件调用函数,改变父组件的状态
handleKeyUp = (event)=>{
//判断是否是回车
//console.log('charcode:',event.keyCode)
if (event.keyCode !==13) return
//准备好一个todo对象
const TodoObject = {id:nanoid,name:event.target.value,done:false}
//不能输入空
if (event.target.value.trim() === '') {
alert('输入不能为空')
return;
}
this.props.addTodo(TodoObject)
//清除输入框
event.target.value =''
}
3.兄弟组件之间的通信
a.可以先将子组件的值传给父组件,然后父组件再将值传给另一个子组件,这样比较麻烦,有可能需要层层传递props
b.兄弟组件之间通过消息订阅与发布来实现通信
需要用到pubsub-js插件
import PubSub from 'pubsub-js'
组件发布消息
PubSub.publish('hus',{name:'tom',age:18})
参数内容是消息名+数据
组件订阅消息
PubSub.subscribe('hus',(msg,data)=>{
console.log('list组件收到数据了'+data);
})
参数是消息名+数据