Exposer la fonction setter useState à la portée globale dans React
P粉299174094
P粉299174094 2023-09-11 09:41:15
0
2
864

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 ?

P粉299174094
P粉299174094

répondre à tous(2)
P粉587970021

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

P粉333186285

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.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal