javascript - React HOC在生命周期方法中使用上下文API

我正在尝试创建一个React HOC以在生命周期方法中访问上下文。

我收到以下错误...

(0, _withContext.withContext)不是函数。 (In '(0, _withContext.withContext)(TestScreen)','(0, _withContext.withContext)' is undefined)

该错误最有可能在于我使用Context HOC编写的方式。我是第一次编写HOC代码。可以帮助指出我的HOC错误在哪里吗？谢谢

在withContext HOC中

import { MyContext } from "../context/MyProvider";

const withContext = Component => {
  return props => {
    <MyContext.Consumer>
      {context => {
        return <Component {...props} context={context} />;
      }}
    </MyContext.Consumer>;
  };
};

在TestScreen.js中

  componentDidMount() {
    console.log(this.props.context);
  }

export default withContext(TestScreen);

最佳答案

您尚未导出withContext函数，因此使用时出现错误

export const withContext = Component => {
  return props => {
    <MyContext.Consumer>
      {context => {
        return <Component {...props} context={context} />;
      }}
    </MyContext.Consumer>;
  };
};

然后像导入

import { withContext } from 'path/to/withContext'

关于javascript - React HOC在生命周期方法中使用上下文API，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51020888/