如何监听div标签内容变化以捕获二维码扫描完成状态？

问题根源 #

你之前的代码存在两个核心问题：

1. 语法错误：componentDidUpdate 缺少参数括号，正确写法应为 componentDidUpdate(prevProps, prevState)
2. 触发时机不匹配：第三方库直接修改DOM内容，不会触发React组件的更新生命周期，因此componentDidUpdate不会执行，无法捕获状态变化

方案一：使用MutationObserver监听DOM变化（推荐） #

MutationObserver是浏览器原生API，能监听DOM元素的任何变化（包括文本内容、子节点修改等），不受React生命周期限制，适合捕获第三方库修改DOM的场景。

实现代码 #

componentDidMount() {
  const statusElement = document.getElementById('qr-code-status');
  if (!statusElement) return;

  // 创建监听实例
  this.qrStatusObserver = new MutationObserver((mutations) => {
    mutations.forEach(() => {
      if (statusElement.innerText.trim() === 'QR code scan complete') {
        this.nextPage();
        // 完成后断开监听，避免重复触发跳转
        this.qrStatusObserver.disconnect();
      }
    });
  });

  // 配置监听规则：覆盖文本内容的多种更新场景
  const observeConfig = {
    childList: true,
    subtree: true,
    characterData: true
  };
  this.qrStatusObserver.observe(statusElement, observeConfig);
}

componentWillUnmount() {
  // 组件卸载时清理监听，防止内存泄漏
  if (this.qrStatusObserver) {
    this.qrStatusObserver.disconnect();
  }
}

关键说明 #

• characterData: true 用于捕获文本内容的直接修改，childList和subtree处理文本通过子节点更新的情况
• 触发跳转后调用disconnect()，避免后续DOM变化重复触发逻辑
• 组件卸载时必须清理监听，防止内存泄漏

方案二：优先使用第三方库原生回调（更可靠） #

如果你的二维码扫描库提供了扫描完成的回调事件（比如onSuccess、onScanComplete），直接使用该回调是最优解——DOM变化属于副作用，官方API的稳定性远高于监听DOM。

示例代码（假设库提供回调） #

// 初始化第三方扫码库时传入回调
thirdPartyQRScanLib.init({
  // 其他配置参数...
  onScanComplete: () => {
    this.nextPage();
  }
});

为什么不推荐componentDidUpdate #

React的componentDidUpdate仅在组件自身的props/state变化时触发，第三方库直接操作DOM不会触发React的更新流程，因此该生命周期钩子不会执行，无法捕获目标状态。

内容的提问来源于stack exchange，提问作者Max