React组件之间的通信方式

1、父组件向子组件传值

    

        父组件通过向子组件传递props， 子组件得到props后进行获取。

         1、在父组件的render函数中return子组件

         2、然后在标签中直接  属性名={属性值}

         3、然后在子组件中直接通过 this.props.属性名 获取父组件传递过来的值即可

    

2、子组件向父组件传值

    过绑定事件进行值的运算，callback/添加事件的时候一定要记得.bind(this)，不然会报错，切记切记，因为通过事件传递的时候``this``的指向已经改变

    

     

 

3、多层嵌套组件跨级传值

     父组件向子组件的子组件通信，向更深层的子组件通信

    注意：

        1、如果父组件结构较深，那么中间的每一层组件都要去传递 props，增加了复杂度，并且这些 props 并不是这些中间组件自己所需要的。当组件层次在三层以内可以采用这种方式，当组件嵌套过深时，就考虑其他方式。

        2、使用Context

•  在父组件中定义一个function getChildContext (固定名称，不能改)，内部必须返回一个对  象，这个对象就是要共享给所有子孙自建的数据.
• 使用属性校验，规定一下传递给子组件的数据类型，需要定义一个静态的对象static childContextTypes (固定名称，不能改)    
• 子组件接收的时候，首先检验父组件传递过来的参数类型 

import React from "react";
import ReactTypes from "prop-types";
export default class Coma extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      color: "red",
    };
  }
  //1、定义函数
  getChildContext() {
    return {
      color: this.state.color,
    };
  }

  // 2、规定传递给子组件的数据类型

  static childContextTypes = {
    color: ReactTypes.string,
  };
 
  render() {
    return (
      <div>
        <h1>这是父组件----采用简便方法传值</h1>
        <Comb />
      </div>
    );
  }
}
 
class Comb extends React.Component {
  static contextTypes = {
    color: ReactTypes.string,
  };
  render() {
    return (
      <div>
        <h2>这是子组件-----获取父组件的值：{this.context.color}</h2>
        <Comc />
      </div>
    );
  }
}
class Comc extends React.Component {
  //3、先进行属性校验；如果接收到的数据类型和父组件定义的数据类型不一致，就会报警告
  static contextTypes = {
    color: ReactTypes.string,
  };
  render() {
    return (
      <div>
        <h3 style={{ color: this.context.color }}>这是孙子组件</h3>
        <hr />
      </div>
    );
  }
}

 

 

4、非嵌套组件（兄弟）之间的通信

     我们需要使用一个 events 包：

        npm install events --save

      新建一个 ev.js，引入 events 包，并向外提供一个事件对象，供通信时使用：