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

Question

我制作了自定义钩子并用于不是反应组件的拦截器。它是 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 进行了更新，但是 loader 似乎只在我加载页面时第一次工作。 我在这里想念什么？

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;

我想你会明白的。