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

Question

I am trying to create a React HOC to access the context in a lifecycle method.

I am getting the following error...

(0, _withContext.withContext) is not a function. (In '(0, _withContext.withContext)(TestScreen)','(0, _withContext.withContext)' is undefined)

The error most likely lies in the way I wrote withContext HOC. I am new to writing HOC codes. Can help point out where my error lies for my HOC? Thanks

In withContext HOC

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

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

In TestScreen.js

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

export default withContext(TestScreen);

Answer 1

You haven't exported the withContext function and hence its an error in using it

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

and then import like

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

Answer 2

You're not explicitly returning your component, try this:

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