Question

我有一个通用的弹出组件，该组件会在我的应用程序的其他几个组件中呈现。我需要做的是每当其中一个容器被破坏时在弹出窗口中运行onclose函数。

因此，当然，在卸载该容器时，我可以在每个容器的prop中传递此函数，但是我的问题是-是否可以仅从我的弹出组件中执行此操作？意味着放置一个侦听器，只要其中一个容器卸下，该侦听器就可以完成工作？

Answer 1

好吧，您可以使用post1 API进行一些操作。

具有以下情况：

<YourApp>
  <PopUpController>
    ......... all other components whatever here ..........
  </PopUpController>
</YourApp>

PopUpController是使用任何辅助方法或您可能想要了解的有关弹出窗口的任何内容来初始化Context的组件。方法可能是您想要的show或hide方法。

// I'm skipping technicalities because I don't know your exact use cases
const PopUpContext = React.createContext();

function PopUpController({ children }) {
  const [open, setOpen] = useState(false);

  const openPopUp = () => setOpen(true);

  const closePopUp = () => setOpen(false);

  return (
    <PopUpContext.Provider value={{ openPopUp, closePopUp }}>
      {children}
    </PopUpContext.Provider> 
  );
}

在拆卸的任何组件中，您只需导入PopUpContext并使用它即可。

...
const popUpContext = useContext(PopUpContext);

....
useEffect(() => {
  ...
  // on dismount we call the close
  return () => {
    popUpContext.closePopUp();
  }
}, [popUpContext]);

是否可以监听另一个组件的卸载生命周期

1 个答案: