我可以使用 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 的属性的引用传递给后台线程