前言：

    React是單向資料流，當有多個元件需要共享狀態的時候，這就需要把狀態放到這些元件共有的父元件中，相應地，這些元件就變成了子元件，從而涉及到父子元件之間的通訊。父元件通過props 給子元件傳遞資料，子元件則是通過呼叫父元件傳給它的函式給父元件傳遞資料。

父元件 App.js

import React, { Component } from 'react';
import Child from './child'

class App extends Component {
    constructor(props){
        super(props);
        this.state={
            msg:'父類的訊息',
            name:'John',
            age:50
        };
       this.callback = this.callback.bind(this);
    }

    callback(msg,name,age){
        this.setState({msg});
        this.setState({name});
        this.setState({age});
    }

  render() {
    return (
      <div className="App">
        <p> Message: &nbsp;&nbsp;{this.state.msg}</p>
        <Child callback={this.callback} age={this.state.age} name={this.state.name}>    
        </Child>
      </div>
    );
  }
}

export default App;
 

父元件給子元件傳值方式，通過props方式，傳遞兩個屬性，age、name，一個方法callback：

<Child callback={this.callback} age={this.state.age} name={this.state.name}></Child>

子元件 Clild.js

import React from "react";

class Child extends React.Component{
    constructor(props){
        super(props);
        this.state={
            name:'Andy',
            age:20,
            msg:"來自子類的訊息"
        };
        this.change = this.change.bind(this);
    }

    change(){
        //呼叫父元件的方法修改父元件的內容
        this.props.callback(this.state.msg,this.state.name,this.state.age);
    }

    render(){
        return(
            <div>
                <div>{this.props.name}</div>
                <div>{this.props.age}</div>
                <button onClick={this.change}>點選</button>
            </div>
        )
    }
}

export default Child;
 

這裡呼叫元件方法時需要注意this的指向，可通過以下兩種方法（不限於）改變this指向：

1、使用bind方法：bind返回一個方法，傳參第一個引數為this的目標指向，第二個及以後的引數為原函式的引數。

2、使用箭頭函式：例如父元件中callback方法的定義：

callback=(msg,name,age)=>{
        this.setState({msg});
        this.setState({name});
        this.setState({age});
    }