useRef TypeScript -不可分配到键入LegacyRef<HTMLDivElement>
我试图将useRef与TypeScript结合使用，但遇到了一些麻烦。
使用我的RefObject (我想)，我需要访问current。(即node.current)
我试过以下几种方法
const node: RefObject<HTMLElement> = useRef(null);const node = useRef<HTMLElement | null>(null);
但是当我去设置ref时，我总是被告知X is not assignable to type 'LegacyRef<HTMLDivElement> | undefined'.
return <div ref={ node }>{ children }</div>
编辑:这不应该局限于任何一种类型的元素，而不仅仅是HTMLDivElement | HTMLFormElement | HTMLInputElement。
编辑:这应该作为一个例子。
import React, { useRef, RefObject } from 'react';
function Test()
{
// const node = useRef(null);
// const node: RefObject<HTMLElement> = useRef(null);
const node = useRef<HTMLElement | null>(null);
if (
node &&
node.current &&
node.current.contains()
){ console.log("current accessed")}
return <div ref={ node }></div>
}回答 6
Stack Overflow用户
发布于 2021-04-06 06:30:29
进口反应：
import React, { useRef } from 'react';
function Test() {
const node = useRef<HTMLDivElement>(null);
if (
node &&
node.current &&
node.current.contains()
){ console.log("current accessed")}
return <div ref={node}></div>
}我做了一个更新。使用HTMLDivElement作为泛型参数而不是HTMLElement | null。而且，contains需要一个参数。
UPDATE useRef需要DOM元素类型的泛型参数。您不需要使用| null，因为RefObject已经知道current可能为null。
见下一种类型：
interface RefObject<T> {
readonly current: T | null
}TS &足够聪明，可以计算出您的引用可能为null。
Stack Overflow用户
发布于 2021-09-11 12:50:40
上述任何一种方法对我都没有用，但结果发现解决方案很简单.
我所做的只是没有显式地将"null“作为useRef初始化中的参数(它期望为null，而不是未定义的)。此外，您也不能使用"HTMLElement“作为您的参考类型，您必须更加具体，所以对我来说是"HTMLDivElement”(例如)。
所以我的工作代码是这样的：
const ref = useRef<HTMLDivElement>(null);
return <div ref={ref}> Some Content... </div>Stack Overflow用户
发布于 2021-08-19 18:12:12
我来这里是为了寻求帮助。也许这个解决方案会帮助其他人寻找同样的东西。我将HTMLDivElement替换为HTMLIFrameElement，因此：
const node = useRef<HTMLIFrameElement>(null);https://stackoverflow.com/questions/66963289
复制相似问题
腾讯云开发者
