如何使用 React 捕获第三方 JS 库 DOM 更改？答案

【问题标题】：How to capture third-party JS library DOM changes using React?如何使用 React 捕获第三方 JS 库 DOM 更改？
【发布时间】：2019-08-21 06:24:56
【问题描述】：

我正在附加我正在使用的支付网关所需的第三方 JavaScript 库。该库在提交后向表单添加隐藏输入（带有错误、代码值等）。如何捕获由该库引起的 HTML DOM 更改？

我尝试在表单提交时使用 document.getElementsByName，但它不起作用。第三方库 HTML DOM 更改似乎是在我的 onClick 函数之后执行的，我不知道该怎么办。

<input type="hidden" name="crazy_payment_gateway_error_name" value="2" />

【问题讨论】：

通常的方式是封装第三方库，使其适应 React。当您不发布任何代码时，很难告诉您需要做什么。

标签： javascript reactjs

【解决方案1】：

为此，您可以使用 DOM Mutation 观察者。它可以让你观察和检查你的元素的变化。

// Select the node that will be observed for mutations
const targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

您的回调将涉及对 DOM 的更改。源代码和 MDN 上的更多信息：

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

【讨论】：

这将插入到 React 的数据流中......在哪里/如何？
谢谢，这就是我要找的！
@JaredSmith 如果对您有帮助，您可以点击 V 将答案标记为已接受。
@AminadavGlickshtein 认为你的意思是对于 simplecreator，谁绝对应该这样做。
我投了赞成票，但我的声望太低（低于 15 声望你看不到一个人的赞成票）