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

Posted

技术标签:

【中文标题】我可以使用 useRef 将对元素的引用传递给孩子吗?【英文标题】:Can I use useRef to pass a reference to an element to a child? 【发布时间】:2020-06-30 09:20:59 【问题描述】:

我称我为查看器对象,它将某些东西安装到 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
    />
  );

TypeScript 错误

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

【问题讨论】:

ref forwarding 不是您要找的东西吗? 我能够通过将类型传递给 useRef 函数来解决问题。 ref 转发会比 useRef 更好吗? 【参考方案1】:

改变

const tgmlViewerMountingTarget = useRef(null);

const tgmlViewerMountingTarget = useRef<HTMLDivElement>(null);

【讨论】:

以上是关于我可以使用 useRef 将对元素的引用传递给孩子吗?的主要内容,如果未能解决你的问题,请参考以下文章

我如何在 reactjs + typescript (钩子)中使用 useRef 将子状态值传递给父级

通过拖放将自定义元素的对象引用传递给另一个自定义元素

将对 NSManagedObject 的属性的引用传递给后台线程

c ++多态 - 将对基类的引用传递给函数

如何将对对象的引用传递给包含在导航控制器中的模态呈现的视图控制器?

React:将状态从孩子传递到孩子再传递给父母