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;    

這樣就實現了簡單的兄弟組件傳值