詳解React組件通信（父傳子、子傳父、兄弟組件傳值）

1、父組件傳值子組件

React中是單向數據流，數據只能從父組件通過屬性的方式傳給其子組件，如下圖：

在引用子組件的時候傳遞，相當於一個屬性，例如：在子組件內通過porps.param獲取到這個param的值。

父組件向子組件傳值，通過props，將父組件的state傳遞給了子組件。

父組件代碼片段：

constructor(props){
    super(props)
    this.state={
      message:"i am from parent"
    }
  }
  render(){
    return(
          <Child txt={this.state.message}/>
    )
  }
}

子組件代碼片段：

render(){
    return(
          <p>{this.props.txt}</p>
    )
}

完整示例

創建父組件 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import User from './User';//引入子組件

//定義數據
const person = {
    name: 'Tom',
    age:20
}

ReactDOM.render(
    //渲染子組件，並向子組件傳遞name,age屬性
    <User name={person.name} age={person.age}></User>
    , document.getElementById('root'));

創建子組件 User.js

import React from 'react';

class User extends React.Component{
    render(){
        return (
            // 使用props屬性接收父組件傳遞過來的參數
            <div>{this.props.name}，{this.props.age}</div>
        );
    }
}

export default User;

在父組件中可以使用展開運算符 ... 傳遞對象

index.js文件

ReactDOM.render(
    //渲染子組件，並向子組件傳遞name,age屬性
    <User {...person}></User>
    , document.getElementById('root'));

User.js文件

render(){
   return (
       // 使用props屬性接收父組件傳遞過來的參數
       <div>{this.props.name}，{this.props.age}</div>
   );
}

2、子組件傳值父組件

子組件通過調用父組件傳遞到子組件的方法向父組件傳遞消息的。

完整案例

子組件 Son.js 文件代碼示例：

import React from 'react';

class Son extends React.Component {
    //構造方法
    constructor(){
        super();
        this.state = {
            inputValue:''
        }
    }
    //按鈕點擊事件
    handleClick(){
        //通過props屬性獲取父組件的getdata方法，並將this.state值傳遞過去
        this.props.getdata(this.state.inputValue);
    }
    //輸入框事件，用於為this.state賦值
    handleChange(e){
        this.setState({
            inputValue: e.target.value
        });
    }

    render(){
        return (
            <React.Fragment>
                <input onChange={this.handleChange.bind(this)}></input>
                <button onClick={this.handleClick.bind(this)}>點擊獲取數據</button>
            </React.Fragment>
        );
    }

}

export default Son;

父組件 Parent.js 文件代碼示例：

import React from 'react';
import Son from './Son';

class Parent extends React.Component {
    //構造方法
    constructor(){
        super();
        this.state = {
            mess: '' //初始化mess屬性
        }
    }
    //用於接收子組件的傳值方法，參數為子組件傳遞過來的值
    getDatas(msg){
        //把子組件傳遞過來的值賦給this.state中的屬性
        this.setState({
            mess: msg
        });
    }

    render(){
        return (
            <React.Fragment>
                {/* 渲染子組件，設置子組件訪問的方法，
                getdata屬性名為子組件中調用的父組件方法名 */}
                <Son getdata={this.getDatas.bind(this)}></Son>
                <div>展示數據：{this.state.mess}</div>
            </React.Fragment>
        );
    }

}

export default Parent;

入口文件 index.js示例代碼：

import React from 'react';
import ReactDOM from 'react-dom';
import Parent from './Parent';

ReactDOM.render(<Parent></Parent>, document.getElementById('root'));

3、兄弟組件傳值

兄弟組件之間的傳值，是通過父組件做的中轉 ，流程為：

組件A -- 傳值 --> 父組件 -- 傳值 --> 組件B

其實可以理解為把前兩個步驟又重新做了一遍，即先執行子組件傳值父組件，然后再執行父組件傳值子組件，效果如下圖：

代碼示例：

創建 Acls.js 組件，用於提供數據

import React from 'react';

class Acls extends React.Component {
	//按鈕點擊事件，向父組件Pcls.js傳值
    handleClick(){
        this.props.data("hello...React...");
    }

    render(){
        return (
            <button onClick={this.handleClick.bind(this)}>Acls組件中獲取數據</button>
        );
    }
}

export default Acls;

創建父組件 Pcls.js 用於中轉數據

import React from 'react';
import Acls from './Acls';
import Bcls from './Bcls';

class Pcls extends React.Component {
	//構造函數
    constructor(){
        super();
        this.state = {
            mess: ''
        }
    }
	//向子組件Acls.js提供的傳值方法，參數為獲取的子組件傳過來的值
    getDatas(data){
        this.setState({
            mess: data
        });
    }

    render(){
        return (
            <React.Fragment>
                Pcls組件中顯示按鈕並傳值：
                <Acls data={this.getDatas.bind(this)}></Acls>
                <Bcls mess={this.state.mess}></Bcls>
            </React.Fragment>
        );
    }
}

export default Pcls;

創建子組件 Bcls.js 用於展示從 Acls.js 組件中生成的數據

import React from 'react';

class Bcls extends React.Component {

    render(){
        return (
            <div>在Bcls組件中展示數據：{this.props.mess}</div>
        );
    }
}

export default Bcls;