React中兄弟组件传值

兄弟组件传值 实际上是间接的通过第三方来实现传值，举例，第一个儿子把值传给父亲，父亲在把这个值传给第二个儿子，这样就实现了兄弟组件传值

来看代码：

父组件代码

import React from 'react';  
import Son1 from './Son1';
import Son2 from './Son2'
class Father extends React.Component{
    constructor(){
        super();
        // 先给message一个空值
       this.state={
           message:''
       }
    }
    // 声明一个方法用来接收Son1传来的值
    message(msg){
     this.setState({
        message:msg  //把Son1传来的值给message
     })
    } 
    render(){
        return(
            <React.Fragment>
                    {/* 我们在这里引入子组件 拿到上边声明的方法 */}
                <Son1 msg={this.message.bind(this)}></Son1>
                   {/* 这里引入第二个子组件 并声明一个属性str  把Son1传来的值传过去 */}
                <Son2 str={this.state.message}></Son2>
            </React.Fragment>
        )
    }
}
export default Father;

第一个子组件

import React from 'react';
class Son1 extends React.Component{
    constructor(){
        super()
    }
    btn(msg){
        // 在这传给父组件一个值
        this.props.msg('这是Son1传过来的')
    }
    render(){
        return(
            <React.Fragment>
                {/* 写一个点击按钮   来调用上边的值*/}
                <button onClick={this.btn.bind(this)}>Son1中的按钮</button>
            </React.Fragment>
        )
    }
}
export default Son1;

第二个子组件

import React from 'react';
class Son2 extends React.Component{
    constructor(){
        super()
    }
    render(){
        return(
            <React.Fragment>
               {/* 第二个子组件通过props 这个属性来接受父组件传过来的str */}
                <div>接收Son1的值:{this.props.str}</div>
            </React.Fragment>
        )
    }
}

export default Son2;    

这样就实现了简单的兄弟组件传值