组件通讯

父->子

Father.js

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

class Father extends Component {
    constructor(props){
        super(props);
        this.state = {
            msg:"the message comes from father"
        }
    }
    Fmethod(){
        this.setState({
            msg:"father's method is running..."
        })
    }
    render(){
        const { msg } = this.state;
        return (
         <Fragment>
             <Child msg = {msg} fmthod = {this.Fmethod.bind(this)} />
         </Fragment>
        )
    }
}

export default Father;

Child.js

import React, { Component, Fragment } from 'react'

class Child extends Component {
    render(){
        const { msg,fmthod } = this.props;
        return (
         <Fragment>
          <div>
              {msg}
          </div>
          <button onClick={fmthod} >call father's method</button>
         </Fragment>
        )
    }
}

export default Child;

点击button前：

点击button后：