React中DOM元素添加时的响应：qr-scanner集成问题

核心问题分析 #

你当前的代码存在两个关键问题：

1. QrScanner实例创建时机错误：在组件函数顶层直接创建实例时，videoElement.current还是null（React尚未完成DOM渲染），且此时video元素并未加入DOM树，触发了qr-scanner内部的shouldHideVideo = true逻辑，最终导致视频被禁用。
2. MutationObserver未生效的原因：你在组件初始化阶段就启动了observer，但此时video元素还没被React渲染到DOM中；后续React挂载video时，你的observer配置可能未覆盖对应的DOM变更（比如未开启子节点监听、子树监听选项），自然无法捕获到元素挂载事件。

正确解决方案 #

方案1：使用React useEffect钩子（推荐） #

React的useEffect会在组件挂载完成（DOM已更新）后执行，此时video元素已存在于DOM树中，刚好满足qr-scanner的要求。同时要在组件卸载时销毁扫描器，避免内存泄漏。

import { useRef, useEffect } from "react";
import QrScanner from "qr-scanner";

export const QrComponent = () => {
  const videoElement = useRef(null);
  const scannerRef = useRef(null); // 保存扫描器实例，用于卸载时销毁

  useEffect(() => {
    // 组件挂载后，video已加入DOM
    if (videoElement.current) {
      scannerRef.current = new QrScanner(videoElement.current, (result) => {
        console.log("扫描结果:", result);
      });
      // 启动扫描
      scannerRef.current.start();
    }

    // 组件卸载时销毁扫描器
    return () => {
      if (scannerRef.current) {
        scannerRef.current.stop();
        scannerRef.current.destroy();
      }
    };
  }, []); // 空依赖数组确保只执行一次

  return <video ref={videoElement} />;
};

方案2：使用ref回调监听元素挂载 #

如果需要显式监听video元素加入DOM的时机，React的ref回调函数是更贴合生命周期的选择——它会在元素挂载到DOM时触发，在元素卸载时也会被调用：

import { useRef } from "react";
import QrScanner from "qr-scanner";

export const QrComponent = () => {
  const scannerRef = useRef(null);

  const handleVideoRef = (element) => {
    if (element) {
      // 元素已挂载到DOM
      scannerRef.current = new QrScanner(element, (result) => {
        console.log("扫描结果:", result);
      });
      scannerRef.current.start();
    } else {
      // 元素被卸载，销毁扫描器
      if (scannerRef.current) {
        scannerRef.current.stop();
        scannerRef.current.destroy();
      }
    }
  };

  return <video ref={handleVideoRef} />;
};

补充说明 #

在React场景下，完全不需要额外使用MutationObserver来监听元素挂载——useEffect或ref回调已经能精准捕获DOM节点的挂载/卸载时机，代码更简洁且符合React的设计逻辑。

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