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