反应`context`总是空对象答案

【问题标题】：React `context` always empty object反应`context`总是空对象
【发布时间】：2017-02-06 21:12:41
【问题描述】：

我正在尝试在我的 React 应用程序中设置上下文，但不知何故我无法从儿童那里访问 context。这是父类：

import React from 'react'
import MenuBar from './MenuBar.js'

export default class App extends React.Component {

  static childContextTypes = {
    prop:    React.PropTypes.bool
  };

  getChildContext(){
    return {
      prop: true
    }
  }

  render() {
    return (
      <div>
        <MenuBar />
      </div>  
    )
  }

}

这是我的儿童班：

import React, { Component } from 'react';

export default class MenuBar extends Component {

  constructor(props, context){
    super(props,context)
    console.log(this.context)
    console.log(context)
  }

  render() {
    console.log(this.context)
    return (
      <div>MenuBar</div>
    );
  }
}

所有console.log 都返回一个空对象，我做错了什么？

【问题讨论】：

标签： javascript class reactjs ecmascript-6

【解决方案1】：

上下文主要由库作者使用，例如，React Router 和 Redux——两个广泛使用的 React 库——目前依赖于上下文。这是 Dan Abramov（Redux 的作者）写的一个很好的总结：https://stackoverflow.com/a/36431583/4186037

您的代码中缺少的部分是您的子组件中需要存在的以下静态变量：

static contextTypes = {
  prop: React.PropTypes.bool
};

这是一个演示：http://codepen.io/PiotrBerebecki/pen/LRLgJP 以下是完整代码。

class App extends React.Component {
  static childContextTypes = {
    prop: React.PropTypes.bool
  };

  getChildContext() {
    return {prop: true};
  }
  render() {
    return <MenuBar/ >;
  }
}


class MenuBar extends React.Component {
  constructor(props, context) {
    super(props, context);
    console.log('in constructor', context.prop) // logs: true
  }

  static contextTypes = {
    prop: React.PropTypes.bool
  };

  render() {
    console.log('in render', this.context.prop) // logs: true
    return (
      <div>MenuBar</div>
    );
  }
}


ReactDOM.render(
  <App />,
  document.getElementById('app')
);

对于 React v15.5 及更高版本，使用 PropTypes 而不是 React.PropTypes，并像这样导入 PropTypes：

import PropTypes from 'prop-types';

请参阅：https://reactjs.org/docs/typechecking-with-proptypes.html 了解更多信息。

【讨论】：