如何将自定义钩子转换为HOC？

Question

我做了一个自定义的钩子，并用在不是react component.it的javascript函数的拦截器中，所以出现了这个错误-

无效的挂钩调用。挂钩只能在功能组件的主体内部调用。

这是不幸的，因为它阻止我们在较旧的基于类的组件和常规javascript函数中使用较新的基于钩子的模块。 所以现在我想将自定义钩子转换为HOC。

const useLoader = props => {
  const [loading, setLoading] = useState(props);

  return [
    loading ? <Loader /> : null,
    () => setLoading(true), // show loader
    () => setLoading(false) // hideLoader
  ];
};
export default useLoader;

我怎么能从未写过HOC。

Here is the code

---

因此要求是，当我单击“继续”按钮时，在获得响应后，api调用的屏幕上将显示加载程序，然后只有加载程序会消失并导航至下一页。

这里是我用HOC更新的更新代码，但是 加载程序似乎仅在我加载页面时才有效。 我在这里想念什么？

Updated with HOC - codeSandboax

Answer 1

您可以尝试这样。

const LoaderHOC = ({ Component }) => {
  const [loading, setLoading] = useState(props);

  const toggleLoading = () => {
    setLoading(!loading)
  }

  return (
    loading ? <Loader/> : <Component toggleLoading={toggleLoading}/>
  )
};
export default useLoader;

我想你会明白的。