有条件调用 React hooks 的解决方法

Question

渲染一个返回 null 并且只有一些钩子和逻辑的组件是否正确？ （有条件调用 React hooks 的解决方法）只是为了最大限度地减少导入行的数量并降低代码复杂性

const MainComponent = () => {
  const [hasLogic, setHasLogic] = useState(false);

  return (
    <div>
      {/*A workaround for conditionally calling React hooks*/}
      {hasLogic && <LogicComponent />}
    </div>
  );
};


// another file
const LogicComponent = () => {
  useEffect(() => {
    /// logics
  }, []);

  /// logics as functions

  return null;
};

Answer 1

您可以有条件地在另一个组件内渲染一个组件。但是，当您创建自定义挂钩时，React JS 文档鼓励使用自定义挂钩在组件之间共享登录。所以当你创建一个钩子时，你应该有一些东西可以返回并在不同的组件中使用它。

您可以阅读更多关于使用自定义钩子的方法这里。