Verfügbarmachen der useState-Setter-Funktion für den globalen Bereich in React

Question

Ich bin gespannt, ob mir so etwas gelingt:

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

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

Aus irgendeinem Grund wird es nicht ausgelöst, wenn ich es von außen rufe. setPanelActive 函数时，useEffect

Sollte ich eine Art Wrapper oder Kontext erstellen? Anbieter, damit es funktioniert?

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">事件总线。它完全符合我的要求。