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

【问题标题】：Reactivity when element added to DOM将元素添加到 DOM 时的反应性
【发布时间】：2022-07-21 13:34:36
【问题描述】：

我想将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 checks, if the passed target-element is already part of the DOM:

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

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

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

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} />
  )
}

然而，我从来没有打印过一行，所以对我来说，好像那里没有突变。

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

【问题讨论】：

标签： javascript reactjs dom react-hooks mutation-observers

【解决方案1】：

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

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

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

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

【讨论】：