Question

我正在尝试创建一个 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);

Answer 1

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

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

然后像导入

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

Answer 2

您没有明确返回组件，请尝试以下操作：

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

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

2 个答案: