react组件间的通信父子通信，子父通信，兄弟通信

react组件间的通信

父子通信

父组件可以将自己的状态通过属性的方式传递给子组件，然后子组件通过props获取到传递来的属性。

father.js父组件中

render() {
        let {list} =this.state;
        return (
            <div>
                <List list={list}/>
            </div>
        )
    }

son.js子组件中

render() {
    //接收到父组件传过来的数据
        let {list} =this.props;
        return(
            <div>
                {
                    list.map((item,index)=>{
                    return <li key={index}>{item}</li>
                    })
                }
            </div>
        )
    }

子父通信

父组件可以将一个更改自身状态的方法传递给子组件，然后子组件通过props接受后进行调用，相当于父组件的方法被执行了，从而更改了自身的状态。

父组件中想要获取到子组件input输入的数据

父组件中的代码

render() {
        let {list} =this.state;
        return (
            <div>
                <Input add={this.add}/>
            </div>
        )
    }

子组件中的代码

//定义一个函数，当按下enter键时，调用子组件传递过来的add方法
down=(e)=>{
        if(e.keyCode===13){
            this.props.add(e.target.value)
        }

    }

    render() {
        return (
            <div>
                <input onKeyUp={this.down}/>
            </div>
        )
    }

兄弟组件通信

兄弟组件通信

主要思想就是发布事件（on 监听）和订阅事件（trigger 触发）。

创建event-Hub.js 在组件a和b中引入

event-Hub.js

let callbackLists = {}
let eventHub = {
    trigger(eventName, data) {
        let callbackList = callbackLists[eventName]
        if (!callbackList) {
            return
        }
        for (let i = 0; i < callbackList.length; i++) {
            callbackList[i](data)
        }
    },
    on(eventName, callback) {
        if (!callbackLists[eventName]) {
            callbackLists[eventName] = []
        }
        callbackLists[eventName].push(callback)
    }
}

export default eventHub

组件a中

down=()=>{
        EventHub.trigger("bianse","yellow")
    }
    render() {
        return (
            <div>
                <button onClick={this.down}>点击</button>
            </div>
        )
    }

组件b中

state={
        color:'red'
    }
    componentDidMount(){
        //接收子组件穿过类的颜色值
        EventHub.on("bianse",color=>{
            this.setState({
                color
            })
        })
    }
    render() {
        return (
            <div>
                <span style={{color:this.state.color}}>文本</span>
            </div>
        )
    }