reactjs - useRef TypeScript - 不可分配给类型 LegacyRef

Question

我正在尝试使用 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>
}

Answer 1

只需导入 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期待争论。
更新 useRef期望 DOM 元素类型的通用参数。您不需要使用 | null因为 RefObject已经知道 current可能为空。
看下一个类型:

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

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