1、父组件

import React from "react";
import LearnContext2 from "./LearnContext2";

const MyContext = React.createContext();

export default class LearnContext extends React.Component {
  state = {
    num: 1,
  };

  /**
   * 接收所有层级的子组件返回的消息
   * @param {} msg
   */
  getChildData = (msg) => {
    console.log(msg);
  };

  render() {
    return (
      <div>
        <div>父级组件</div>
        <MyContext.Provider
          /**
           * 给所有的子级组件传一个num的值
           * 并且传一个方法 让他们也可以和父级组件通讯
           */
          value={{ num: this.state.num, getChildData: this.getChildData }}
        >
          <LearnContext2></LearnContext2>
        </MyContext.Provider>
      </div>
    );
  }
}

　　2、子组件

import React from "react";
import LearnContext3 from "./learn-context3";

export default class LearnContext2 extends React.Component {
  render() {
    return (
      <div>
        <div>子组件</div>
        <LearnContext3></LearnContext3>
      </div>
    );
  }
}

　　3、孙组件

　　使用 Consumer 接收传下来的context

import React from "react";
import { MyContext } from "./learn-context";

class LearnContext3 extends React.Component {
  
  render() {
    return (
      <MyContext.Consumer>
        {/* 
          直接使用Consumer
          这种方式获取参数
          但是这种方式 不方便在render意外的地方使用传下来的参数
        */}
        {(context) => (
          <div>
            <div>孙组件</div>
            <div>爷爷——传下来的{context.num}</div>
            <button onClick={() => context.onChildHandle('哈喽爷爷')}>给爷爷问声好</button>
          </div>
        )}
      </MyContext.Consumer>
    );
  }
}

export default LearnContext3;

　　使用contextType 接收context

import React from "react";
import { MyContext } from "./learn-context";

class LearnContext4 extends React.Component {

  // 可以直接在类里面使用static 声明静态属性
  static contextType = MyContext

  render () {
    return (
      <div>
        <div>孙组件</div>
        {/* 
          当我们把context挂载到当前组件的contextType的时候
          就可以直接使用this.context拿到相关的值
        */}
        <div>爷爷——传下来的{this.context.num}</div>
        <button onClick={() => this.context.onChildHandle('哈喽爷爷')}>给爷爷问声好</button>
      </div>
    )
  }
}

// 也可以直接在这上面进行赋值
LearnContext4.contextType = MyContext

export default LearnContext4

上一篇

React.PureComponent 和 React.memo的区别是什么？