React组件之间的通信

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);
        })

参数是消息名+数据