无法在 react 中使用 Effect 返回函数访问 HTML DOM 进行清理-解网

问：

我在我的 react 应用程序中使用了第三方脚本，该脚本使用纯 JS 在我的网页中附加 HTML 元素。该库将函数附加到对象上，然后我们可以执行各种操作，例如和。mwwindow'init''cleanup'

init 函数运行非常正常并显示一个小部件 UI，但 clenup 函数正在尝试访问 dom 但找不到 dom。removeEventListeners

法典：

const ThirdPartyWidget = () => {

  useEffect(() => {
    if (window.mw) {
      window.mw("init", { elementId: "widget-element" });
    }

    return () => {
      if (window.mw) {
        window.mw("cleanup");
      }
    };
  }, []);

  return <div id="widget-element"></div>;
};

export default ThirdPartyWidget;

我收到以下错误，

我所知道的是清理函数正在尝试访问 dom 并删除它附加的事件侦听器。但它无法做到这一点。

该库正在访问正确的 DOM 元素，因为当我尝试在 chrome 开发工具控制台中使用相同的 querySelector 路径访问 DOM 时，我可以访问它们。在反应生命周期和清理的核心概念中，我缺少一些导致问题的东西。

我现在能做什么？

👉 主要问题：这里>>react 在清除该组件的 DOM 后是否运行 useEffect cleanUp 返回函数？

遗憾的是，useRef 和 DOM 引用不能在这里使用，因为它是第三方 LIB。

javascript reactjs dom react-hooks removeeventlistener

无法在 react 中使用 Effect 返回函数访问 HTML DOM 进行清理

Cannot access HTML DOM in react useEffect return function, for cleanup

评论