将元素添加到 DOM 时的反应性

Question

我想将qr-scanner集成到我的项目中。 该库能够利用摄像头解码 QR 码。 它只需要对 html-video-element 的引用，然后将网络摄像头流和可选的 QR 码的一些指示符呈现给该元素。

最简单的组件是这样的：

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

export const QrComponent = () => {
  const videoElement = useRef(null);
  const scanner = new QrScanner(videoElement.current, (result) => {
    console.log(result)
  }) 

  return (
    <video ref={videoElement} />
  )
}

但是，qr-scanner 会检查传递的目标元素是否已经是 DOM 的一部分：

if (!document.body.contains(video)) {
    document.body.appendChild(video);
    shouldHideVideo = true;
}

创建 QrScanner 对象时，视频元素将永远不会添加到 DOM。 这导致shouldHideVideo设置为 true，这会在库代码中完全禁用视频。

所以我认为我需要某种方式来对添加到 DOM 的视频元素做出反应。 我想使用 MutationObserver （并通过从这个页面窃取钩子来尝试它），但是我只想使用这样的钩子打印出所有突变：

import { useRef, useCallback } from "react";
import QrScanner from "qr-scanner";
import { useMutationObservable } from "./useMutationObservable";

export const QrComponent = () => {
  const videoElement = useRef(null);
  const scanner = new QrScanner(videoElement.current, (result) => {
    console.log(result)
  })

  const onMutation = useCallback((mutations) => console.log(mutations), [])
  useMutationObservable(document, onMutation)

  return (
    <video ref={videoElement} />
  )
}

但是，我从来没有打印过一行，所以在我看来，好像那里没有突变。

我可能误会了什么吗？ 我如何对添加到文档中的视频元素做出反应？

Answer 1

好的，所以我认为我没有提供足够的信息，但我自己发现了：

MutationObserver不起作用，因为我告诉它观看document ，但我实际上是在这个特定组件的影子中！ 所以我怀疑不会检测到暗影界的突变。

另外，因为我在 shadowdom 中，所以document.contains(videoElem.current)永远不会是真的。 因此，在这种特殊情况下，我没有更好的选择，只能将 qr-scanner 的代码复制到我的项目树中并根据需要进行调整。

另一方面： useLayoutEffect是一个 react-hook，它计划在 DOM 突变之后运行。 所以如果我必须从这个想法开始，这就是我会使用的。