Verfügbarmachen der useState-Setter-Funktion für den globalen Bereich in React
P粉299174094
P粉299174094 2023-09-11 09:41:15
0
2
837

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?

P粉299174094
P粉299174094

Antworte allen(2)
P粉587970021

如果您希望 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 应该触发

P粉333186285

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

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!