搜尋

首頁  >  問答  >  主體

在 React 中將 useState setter 函數公開到全域範圍

我很好奇我是否可以做這樣的事情:

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

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

出於某種原因,當我從外部呼叫 setPanelActive 函數時,useEffect 不會被觸發。

我應該創建某種包裝器或上下文嗎?提供者才能使其正常工作?

P粉299174094P粉299174094513 天前896

全部回覆(2)我來回復

  • P粉587970021

    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 應該會觸發

    回覆
    0
  • P粉333186285

    P粉3331862852023-09-12 00:33:05

    感謝大家的參與。經過對 @hatana 提到的內容進行一些研究後,我找到了一個解決方案 - @hatana 。 com/DawChihLiou/eventbus-demo" rel="nofollow noreferrer">事件總線。它完全符合我的要求。

    回覆
    0
  • 取消回覆