Mendedahkan fungsi penetap useState kepada skop global dalam React

Question

Saya ingin tahu jika saya boleh melakukan sesuatu seperti ini:

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

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

Atas sebab tertentu apabila saya memanggilnya dari luar setPanelActive 函数时，useEffect tidak tercetus.

Perlukah saya membuat sejenis pembungkus atau konteks? Penyedia untuk membuatnya berfungsi?

Answer 1

Jika anda menjangkakan globalThis.setPanelActive 与您正在执行的分配中的 setPanelActive berfungsi sama maka anda silap, cangkuk direka bentuk untuk berfungsi dalam skop komponen yang mana anda perlu menggunakan konteks pada tahap yang lebih tinggi seperti ini:

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

Sekarang apabila anda menggunakan setPanelActive 时，useEffect daripada mana-mana komponen ia sepatutnya mencetuskan

Answer 2

Terima kasih semua kerana mengambil bahagian. Selepas membuat beberapa kajian tentang apa yang @hatana sebutkan, saya menemui penyelesaian - @hatana . com/DawChihLiou/eventbus-demo" rel="nofollow noreferrer">Bas Acara . Ia melakukan apa yang saya mahukan.