如何將自定義掛鈎轉換為 HOC？

Question

我制作了自定義鈎子並用於不是反應組件的攔截器。它是 javascript function 所以我得到了這個錯誤 -

無效的掛鈎調用。 掛鈎只能在 function 組件的主體內部調用。

這是不幸的，因為它阻止我們在舊的基於類的組件和常規的 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。

這是代碼

---

所以要求是當我點擊繼續按鈕時，加載程序將在 api 調用的屏幕上顯示，然后只有加載程序會消失並導航到下一頁。

這是我用 HOC 更新的更新代碼，但加載器似乎只在我加載頁面時第一次工作。 我在這里想念什么？

使用 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;

我想你會有一個想法。