reactjs - 我可以使用 useRef 将对元素的引用传递给孩子吗？

Question

我称我为查看器对象，它将某些东西安装到带有 id 的元素中tgmlviewer。当我只有一个这样的组件时，这很好用。

import React, { useEffect } from "react";
import { Viewer } from "../../tgmlViewer/Viewer";
import { disableTgmlPointerEvents } from "../../../constants";
import { XmlType } from "./XmlView";

type Props = {
  serialized: string;
  xmlType: XmlType;
};

const tgmlViewerId = "tgmlviewer";

export default function TgmlImageViewer(props: Props) {
  const { serialized, xmlType } = props;

  useEffect(() => {
    let viewer: Viewer;
    const viewerElement = document.getElementById(tgmlViewerId);
    if (viewerElement instanceof HTMLDivElement) {
      viewer = new Viewer(viewerElement);
      viewer.load(serialized);
    }
    return () => {
      if (viewer) {
        viewer.reset();
      }
    };
  });

  return (
    <div
      id={tgmlViewerId}
    />
  );
}

现在我想创建多个组件。每个组件都需要将唯一的 id 传递给其查看器对象。可以useRef用于这个吗？

这是我最好的尝试：

import React, { useEffect, useRef, Ref } from "react";
import { Viewer } from "../../tgmlViewer/Viewer";
import { disableTgmlPointerEvents } from "../../../constants";
import { XmlType } from "./XmlView";

type Props = {
  serialized: string;
  xmlType: XmlType;
};

export default function TgmlImageViewer(props: Props) {
  const { serialized, xmlType } = props;

  const tgmlViewerMountingTarget = useRef(null);

  useEffect(() => {
    if (!tgmlViewerMountingTarget) {
      return;
    }
    let viewer: Viewer;
    const viewerElement = tgmlViewerMountingTarget.current;
    if (viewerElement instanceof HTMLDivElement) {
      viewer = new Viewer(viewerElement);
      viewer.load(serialized);
    }
    return () => {
      if (viewer) {
        viewer.reset();
      }
    };
  });

  return (
    <div
      ref={tgmlViewerMountingTarget}
    />
  );
}

打字稿错误

ts: const viewerElement: null // 'instanceof' 表达式的左侧必须是 'any' 类型、对象类型或类型参数。

Answer 1

改变

const tgmlViewerMountingTarget = useRef(null);

至

const tgmlViewerMountingTarget = useRef<HTMLDivElement>(null);