我很好奇我是否可以做這樣的事情:
const [panelActive, setPanelActive] = useState(false); (globalThis as any).setPanelActive = setPanelActive; useEffect(() => console.log(panelActive), [panelActive])
出於某種原因,當我從外部呼叫 setPanelActive
函數時,useEffect
不會被觸發。
我應該創建某種包裝器或上下文嗎?提供者才能使其正常工作?
P粉5879700212023-09-12 09:11:45
如果您希望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粉3331862852023-09-12 00:33:05
感謝大家的參與。經過對 @hatana 提到的內容進行一些研究後,我找到了一個解決方案 - @hatana 。 com/DawChihLiou/eventbus-demo" rel="nofollow noreferrer">事件總線。它完全符合我的要求。