React 组建通信

父组件向子组件通信

<Timer order={order} /> //倒计时组件

 在子组件里直接通过props获取父组件传递过来的参数，如下：

let order = this.props.order;//订单详情

 子组件向父组件通信

子组件更新组件状态，通过回调函数的方式传递给父组件。
子组件调用父组件通过props传给它的函数更新父组件state，进而完成子组件向父组件的通讯。

先看父组件

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

//导入子组件
import Child from './child.js'; 

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      msg: '父组件初始msg'
    }
  }

  //父组件回调函数，更新state，进而更新父组件。
  callback=(msg)=>{
    // setState方法,修改msg参数,值是由子组件传过来。
    this.setState({msg});
  }

  render() {
    return (
      <div className="App">
        <p>子组件传值实验: {this.state.msg}</p>
        <Child callback={this.callback} ></Child>
      </div>
    );
  }
}

export default App;

再看子组件

import React from "react";

class Child extends React.Component{
	constructor(props){
      	super(props);
	    this.state={
	    	msg: '子组件msg传值'
	    }
    }
    //通过props调用回调函数传值
    trans=()=>{
        this.props.callback(this.state.msg);
    }
    render(){
        return(
            <div>
                <button onClick={this.trans}>激发trans事件，传值给父组件</button>
            </div>
        )
    }
}

export default Child;