React：基于类的上下文 API 到基于钩子的上下文 API

Question

我真的是 Hooks 的新手，在学习过程中面临许多从旧风格转换的困难。

我的旧代码如下：

context.js

import React from "react";

const SomeContext = React.createContext(null);

export const withContext = (Component) => (props) => (
  <SomeContext.Consumer>
    {(server) => <Component {...props} server={server} />}
  </SomeContext.Consumer>
);

export default SomeContext;

main index.js

<SomeContext.Provider value={new SomeClass()}>
   <App />
</SomeContext.Provider>

但是当我想访问它通过与export default withContext(SomeComponent)由this.props.server.someFunc()这表明道具无类钩子函数是不确定的。

我怎样才能在反应钩子中实现this.props

编辑：

SomeClass 不是 React 继承类，它看起来像它。

class SomeClass {
  someFunc = (id) => axios('api endpoints')
} 

某个组件

const SomeComponent = () => {
...

useEffect(() => {
   this.props.server.someFunc(id).then(...).catch(...)
}, ...)

...
}

Answer 1

在常规情况下，您需要导出 Context，然后导入它并在useContext使用它：

export const SomeContext = React.createContext(null);


// Usage
import { SomeContext } from '..';

const SomeComponent = () => {
  const server = useContext(SomeContext);

  useEffect(() => {
    server.someFunc(id);
  });
};

但是在您的情况下，由于您使用 HOC，因此您在prop拥有server ：

const SomeComponent = (props) => {
  useEffect(() => {
    props.server.someFunc(id);
  });
};