React - 新的 Context API 不适用于 Class.contextType，但适用于 Context.Consumer答案

【问题标题】：React - New Context API not working with Class.contextType, but works with Context.ConsumerReact - 新的 Context API 不适用于 Class.contextType，但适用于 Context.Consumer
【发布时间】：2019-04-06 04:47:05
【问题描述】：

我正在尝试使用返回包装组件的 HOC 的新上下文 API。当我使用Class.contextType = Context 方法时它不起作用：

return function myHOC(WrappedComponent) {
  class HOC extends React.Component {
    // static contextType = MyContext;

    render() {
      console.log(this.context);  // HERE, this logs `{}`

      // ..do stuff
      return <WrappedComponent {...this.props} />
    }
  }
  HOC.contextType = MyContext;

  return HOC;
};

但是，我编写了相同的代码，但使用了<MyContext.Consumer>，它运行良好：

return function myHOC(WrappedComponent) {
  const HOC = (props) => (
    <MyContext.Consumer>
      {(context) => {
        console.log(context);  // HERE, correct values

        return <WrappedComponent {...props} /> 
      }}
    </MyContext.Consumer>
  );

  return HOC;
};

我在这里没有看到什么吗？

【问题讨论】：

对于像我这样正在寻找被重定向到这个问题的 Class.contextType 和 Context.Consumer 之间的区别的其他人，这是一个答案：stackoverflow.com/questions/54283509/…

标签： reactjs react-context

【解决方案1】：

事实证明，即使我将 react-scripts 更新为 2.0，我也必须自己将 react 更新为 16.6（之前是 16.3）。

我的印象是 react-scripts 也会处理 react 版本。我的错，在那里搞糊涂了。

【讨论】：

我仍在为 console.log(this.context) 获取 {}。更新了 react-scripts 版本和 react 版本。你能帮我吗