在 React 中将 useState setter 函数公开到全局范围

Question

我很好奇我是否可以做这样的事情：

const [panelActive, setPanelActive] = useState(false);
(globalThis as any).setPanelActive = setPanelActive;

useEffect(() => console.log(panelActive), [panelActive])

出于某种原因，当我从外部调用 setPanelActive 函数时，useEffect 不会被触发。

我应该创建某种包装器或上下文吗？提供商才能使其正常工作？

Answer 1

如果您希望 globalThis.setPanelActive 与您正在执行的分配中的 setPanelActive 一样工作，那么您就错了，挂钩被设计为在组件范围内工作在这种情况下，您必须在更高的级别上使用 上下文，如下所示：

const App = () => {
  export const PanelConext = createContext(); // import createContext
  const [panelActive, setPanelActive] = useState(false);
  //...

  useEffect(() => console.log(panelActive), [panelActive])

  
  return (
    <PanelConext.Provider value={{ panelActive, setPanelActive}}>
      //..
    </PanelConext.Provider>
  );
};

const Component = () => {
  const { panelActive, setPanelActive} = useContext(PanelContext); // import `PanelContext`from App and `useContext` from react
  //...
};

现在，当您从任何组件使用 setPanelActive 时，useEffect 应该触发

Answer 2

感谢大家的参与。经过对 @hatana 提到的内容进行一些研究后，我找到了一个解决方案 - @hatana 。 com/DawChihLiou/eventbus-demo" rel="nofollow noreferrer">事件总线。它完全符合我的要求。