在IIFE中使用React Hooks会破坏钩子规则

问题描述

背景

我正在开发一个侧边栏组件，可以从UI中的许多按钮打开它。我想1）仅渲染一次，2）授予访问权以将这些按钮的isVisible状态更新为这些按钮，而无需通过公共祖先钻取道具。

期望与现实

我希望我可以使用自己的api方法创建一个上下文来更新内部状态。在我的代码示例中，我尝试使用IIFE进行此操作。

问题

1. 这如何打破钩子规则？
2. 我还可以如何为此上下文提供更新功能？

export const SidebarContext = createContext((() => {
  const [isVisible,setIsVisible] = useState(false)

  return {
    isVisible,toggleVisibility: () => setIsVisible(!isVisible)
  }
})())

解决方法

6接收默认值。因此，您要定义一个立即调用的函数，其结果将用作上下文的默认值。这就是6中断this rule的地方：

从React函数组件中调用钩子。

为了完成您想要的，您可以这样做：

6