reactjs - useRef TypeScript - nu poate fi atribuit tipului LegacyRef<HTMLDivElement>

Încerc să folosesc useRef cu TypeScript, dar am câteva probleme.

Cu RefObject-ul meu (presupun) trebuie să accesez current. (adică node.current)

Am încercat următoarele

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

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

dar când încerc să setez ref mi se spune întotdeauna că X nu poate fi atribuit tipului 'LegacyRef<HTMLDivElement> | undefined'.

return <div ref={ node }>{ children }</div>

Editare: acest lucru nu ar trebui să fie limitat la un singur tip de element, deci nu doar HTMLDivElement | HTMLFormElement | HTMLInputElement

Editare: Acesta ar trebui să funcționeze ca un exemplu

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>
}

Răspuns #1

Niciuna dintre opțiunile de mai sus nu a funcționat pentru mine, dar se pare că soluția era destul de simplă...

Singura greșeală pe care o făceam era că nu includeam în mod explicit „null” ca parametru în inițializarea useRef (se așteaptă null, nu undefined). De asemenea, NU poți folosi „HTMLElement” ca tip de referință, trebuie să fii mai specific, așa că pentru mine a fost „HTMLDivElement”, de exemplu).

Deci, codul funcțional pentru mine era ceva de genul acesta:

const ref = useRef<HTMLDivElement>(null);

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

Răspunsul #2

Doar importă 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>
}

Am făcut o actualizare. Folosește HTMLDivElement ca parametru generic în loc de HTMLElement | null. De asemenea, contains așteaptă un argument.

ACTUALIZARE useRef așteaptă un argument generic de tip element DOM. Nu trebuie să folosești | null deoarece RefObject știe deja că current s-ar putea să fie nul.

Vezi următorul tip:

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

TS și React sunt suficient de deștepți pentru a-și da seama că referința ta ar putea fi null