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;    

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

React中兄弟组件传值的相关教程结束。