使用 jQuery 操作 DOM，无需更改反应代码答案

【问题标题】：Manipulate the DOM using jQuery, without changing the react code使用 jQuery 操作 DOM，无需更改反应代码
【发布时间】：2020-09-14 07:22:46
【问题描述】：

假设我想开发一个第三方插件，比如 chrome 扩展。所以我绝对没有权限更改页面的 javascript 代码。我所能做的就是在页面之外添加一些东西。

所以我会使用 jQuery 来操作 DOM。但是如果页面是由 react 渲染的，那么我对 DOM 所做的事情将在 react 生命周期中被删除。我看到一些教程教授如何将 jQuery 集成到反应应用程序中。但这不是我需要的。有没有办法在不改变原始反应代码的情况下操纵 DOM？比如注册一个监听器到反应引擎之类的？

我想到的只是使用 setInterval 或 requestAnimationFrame 循环来保持 DOM 的变化。但是我还是想知道有没有更好的办法。

【问题讨论】：

标签： javascript jquery reactjs dom google-chrome-extension

【解决方案1】：

您可以使用MutationObserver 来检测 DOM 被修改的时刻，如果它被删除，则再次添加您的内容。

let myStuff = $('<div>foo</div>');

const mo = new MutationObserver(() => {
  if (!document.contains(myStuff[0])) {
    insert();
  }
});

observe();

function insert() {
  mo.disconnect();
  myStuff.appendTo('.some.react.element');
  observe();
}

function observe() {
  mo.observe(document.body, {childList: true, subtree: true});
}

另一种高级方法是通过 __REACT_DEVTOOLS_GLOBAL_HOOK__ 在 page context 中连接到 React 本身，React DevTools 也使用它，如果您不怕深入研究，请自行查找更多信息。

【讨论】：