useRef TypeScript - 不可分配给类型 LegacyRef<HTMLDivElement>

IT技术 reactjs typescript tsx
2021-04-23 04:33:25

我正在尝试useRef与 TypeScript一起使用，但遇到了一些麻烦。

用我的RefObject（我假设）我需要访问current. （即node.current）

我已经尝试了以下

  • const node: RefObject<HTMLElement> = useRef(null);
  • const node = useRef<HTMLElement | null>(null);

但是当我去设置时，ref我总是被告知 Xis 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>
}
4个回答

只需导入 React：

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可能为空。

看下一个类型：

interface RefObject<T> {
  readonly current: T | null
}

TS 和 React 足够聪明，可以确定您的 ref 可能为空

如果您想修改答案，我已经修改了示例
2021-05-24 04:33:25
我很欣赏答案，这确实适用于我提供的示例，但不幸的是我需要添加到我的示例中。我很抱歉
2021-05-30 04:33:25
HTMLElement 接口是所有 html 元素的父接口。它不起作用，因为您无法按字面意思创建 HTMLElement。你只能创建 HTMLDivElement、HTMLSpanElement、HTMLAnchorElement 等......所以 React/JSX 只能接受 HTML{element}Element。例如，它抱怨 HTMLElement 没有allign属性。将鼠标悬停在 IDE 中的 ref 属性上，按 Ctrl 并单击 ref 属性。它应该将您重定向到 ref 类型
2021-06-04 04:33:25
感谢您的更新，我会接受这个答案。我想我理解关于null我对为什么HTMLDivElement能够处理ref但HTMLElement不是更感兴趣的部分
2021-06-19 04:33:25
谢谢，这确实有效。如果可以，请提供更多详细信息，说明为什么这样做以及为什么应该使用此界面。谢谢
2021-06-21 04:33:25

以上都不适合我，但结果证明解决方案很简单......

我做错的只是在 useRef 初始化中没有明确包含“null”作为参数（它期望为 null，而不是未定义）。你也不能使用“HTMLElement”作为你的引用类型，你必须更具体，所以对我来说它是“HTMLDivElement”）。

所以对我来说工作代码是这样的：

const ref = useRef<HTMLDivElement>(null);

return <div ref={ref}> Some Content... </div>

关键是使用 HTMLElement 和 undefined 进行初始化

const node = useRef<HTMLElement>();

我来这里是为了寻求 iframe 参考的帮助。也许这个解决方案会帮助其他正在寻找同样事情的人。我换成HTMLDivElement了HTMLIFrameElement这样：

const node = useRef<HTMLIFrameElement>(null);
其它你可能感兴趣的问题
上一篇React Router：无法读取未定义的属性“路径名” 下一篇创建react应用程序错误：找不到module'./locale'