React中Context的一些用法

import React from "react";
import PropTypes from "prop-types";

class A extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <B />;
  }
}

class B extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <C />;
  }
}

class C extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>{this.context.user.name}</div>;
  }
}
// 不能省略
C.contextTypes = {
  user: PropTypes.object.isRequired
};

class component8 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {
        name: "jesse"
      }
    };
  }
  // 重点
  getChildContext() {
    return {
      user: this.state.user
    };
  }
  render() {
    return <A />;
  }
}

// 不能省略
component8.childContextTypes = {
  user: PropTypes.object.isRequired
};
export default component8;
  1. 在被引用层和引用层分别制定contextTypes

  2. 在被引用层定义一个getChildContext方法

  3. 在引用层使用this.context访问

results for ""

    No results matching ""