react 同辈组件之间传递数据(两种方式)

前言 : 本片适合有react 基础 的开发者阅读 .
方法一 : 通过父组件中转
通过父组件中转: 子组件1将值传给父组件 ,父组件再将值传给子组件2

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
class Father extends Component{
    constructor(props){
        super(props);
        this.state = {
            sName: 'Tom',
            iNum: 0
        }
    }
    // 3. 1 子传 , 定义一个函数
    fnGetData = (iNum)=>{
        this.setState({iNum})
    }
    render(){
        return (
            <div>
                <h1>我是父组件</h1>
                <p>显示子组件传递过来的值 : { this.state.iNum }</p>
                <Son  
                // 1. 父传 ( 相当于以键值对的方式传 )
                    name={ this.state.sName }
                    // 4. 父组件传给子组件
                    fnSetData = { this.fnGetData }
                />
                {/* a. 兄弟之间传值 , 父组件相当于一个中转 器 */}
                <Son2 iNum={ this.state.iNum }/>
            </div>
        )
    }
}
class Son extends Component{
    render(){
        return (
            <div>
                <h2>我是子组件</h2>
                {/* 2. 子接 */}
                <p>显示父组件传递过来的值 { this.props.name }</p>
                {/* 5. 子组件调用函数, 传递一个数据10 */}
                {/* <button onClick={ this.props.fnSetData(10) }>传递数据给父组件</button>  报错 :  Maximum update depth exceeded.  */}
                <button onClick={()=>{ this.props.fnSetData(10) } }>传递数据给父组件</button>
            </div>
        )
    }
}
class Son2 extends Component{
    render(){
        return (
            <div>
                <h2>我是子组件2</h2>
                {/* b. 子接 */}
                <p>接收子组件1传递过来的值 { this.props.iNum }</p>
            </div>
        )
    }
}
ReactDOM.render(<Father />,document.getElementById('root'));

方法二 : 系统内置的events模块
通过系统内置的 event模块 , 导入这个模块的EventEmitter类 ; 将这个类实例化成一个对象, 取名为bus ; 子组件1 通过这个对象的emit() 方法发送数据 , 子组件2 通过对象的on()方法接收数据

import ReactDOM from 'react-dom';
import React,{Component} from 'react';
// 导入events模块的 EventEmitter类
import { EventEmitter } from 'events';

// 实例化一个对象bus，兄弟组件之间通过它进行通信
const bus = new EventEmitter();
class Father extends Component{
    render(){
        return(
            <div>
                <h1>这是父组件</h1>
                <Son01 />
                <Son02 />
            </div>
        )
    }
}
class Son01 extends Component{
    constructor(props){
        super(props);
        this.state = {
            msg:''
        }
    }
    // 绑定监听，接收数据
    componentDidMount(){
        bus.on('go',dat=>{
            this.setState({
                msg:dat.msg
            })
        })           
    }
    render(){
        return(
            <div>
                <h2>这是子组件一</h2>
                <p>接收子组件传递过来的值：{ this.state.msg }</p>
            </div>
        )
    }
}
class Son02 extends Component{
    // 定义传递数据的函数
    fnSend=()=>{
        bus.emit('go',{
            msg:'我来也'
        })
    }

    render(){
        return(
            <div>
                <h2>这是子组件二</h2>
                <input type="button" value="传值给子组件一" onClick={ this.fnSend } />
            </div>
        )
    }
}
// 使用组件
ReactDOM.render(<Father />,document.getElementById('root'));