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输入的数据

父组件中的代码

import React, { Component } from 'react'
import Addinput from './AddInput'
export default class List extends Component {
    constructor() {
        super()
        this.state = {
            list:["a","b","c"]
        }
    }
    add=(str)=>{
        this.setState({
            list:[...this.state.list,str]
        })
        console.log(str)
    }

    render() {
        let { list } = this.state
        return (
            <div>
                <Addinput add={this.add}/>
                <ul>
                    {
                        list.map((item,index) => {
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}

//定义一个函数，当按下enter键时，调用子组件传递过来的add方法
子组件Addinput.js

```js
import React, { Component } from 'react'

export default class AddInput extends Component {
    handleChange=(e)=>{
    }
    keydown=(e)=>{
        if(e.keyCode==13){
            this.props.add(e.target.value)
            e.target.value=""
        }
    }
    render() {
        return (
            <div>
            <label> <input type="text"  id="username" placeholder="请输入用户名" onChange={this.handleChange} onKeyDown={this.keydown}></input></label><br/>
            </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>
        )
    }