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

问题描述 投票:0回答:1

我做了自定义钩子,并在拦截器中使用,这不是react组件,而是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。

下面是代码


所以要求当我点击继续按钮时,加载器将在屏幕上可见,在得到响应后,只有加载器会消失并导航到下一页。

enter image description here

这里是更新后的代码,我已经用HOC更新了,但Loader似乎只在第一次加载页面时工作,我在这里缺少什么?

更新后的HOC - codeSandboax

javascript reactjs react-hooks jsx higher-order-functions
1个回答
0
投票

你可以像这样尝试。

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

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

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

我想你会得到一个想法。

© www.soinside.com 2019 - 2024. All rights reserved.