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;    

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