Exposer la fonction setter useState à la portée globale dans React

Question

Je suis curieux de savoir si je peux faire quelque chose comme ceci :

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

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

Pour une raison quelconque, lorsque je l'appelle de l'extérieur, setPanelActive 函数时，useEffect ne se déclenche pas.

Dois-je créer une sorte de wrapper ou de contexte ? Fournisseur pour que ça marche ?

Answer 1

Si vous vous attendez à ce que globalThis.setPanelActive 与您正在执行的分配中的 setPanelActive fonctionne de la même manière, vous vous trompez, les hooks sont conçus pour fonctionner dans le cadre du composant, auquel cas vous devez utiliser context à un niveau supérieur comme ceci :

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
  //...
};

Maintenant, lorsque vous utilisez setPanelActive 时，useEffect à partir de n'importe quel composant, cela devrait déclencher

Answer 2

Merci à tous pour votre participation. Après avoir fait quelques recherches sur ce que @hatana a mentionné, j'ai trouvé une solution - @hatana . com/DawChihLiou/eventbus-demo" rel="nofollow noreferrer">Event Bus . Il fait exactement ce que je voulais.