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);
  });
};