react组件通信方式汇总

父组件更新组件状态，通过props传递给子组件，子组件得到后进行更新。
Timer 是倒计时子组件，集成在了OrderPay父组件里，父组件向子组件传订单数据参数order对象。如下代码：

<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;
————————————————
版权声明：本文为CSDN博主「ebonyzhang」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/xingfuzhijianxia/article/details/86151243

再看子组件

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;
————————————————
版权声明：本文为CSDN博主「ebonyzhang」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/xingfuzhijianxia/article/details/86151243

效果

 

跨级组件间通信
举个例子react-redux的，也是通过Context提供一个全局态的store。还有用户信息的使用，也可以通过context中传递数据。

通过props或state传值比较麻烦，context提供了一种组件之间共享数据的方式，可以避免数据在组件树上逐层传递，也就是用Context来实现跨层级的组件数据传递。

这篇文章写得非常好，看完就能理解context，上手实验更能理解透彻，毕竟最后都要应用起来。
https://www.jianshu.com/p/eba2b76b290b?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
————————————————
版权声明：本文为CSDN博主「ebonyzhang」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/xingfuzhijianxia/article/details/86151243