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

reactjs typescript tsx
person FamousAv8er    schedule 06.04.2021    source источник
comment
Пожалуйста, предоставьте воспроизводимый пример   -  person captain-yossarian    schedule 06.04.2021
comment
@ captain-yossarian см. последнее изменение   -  person FamousAv8er    schedule 06.04.2021

Ответы (2)


arrow_upward
6
arrow_downward

Просто импортируйте 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 может быть нулевым

person captain-yossarian    schedule 06.04.2021
comment
Я ценю ответ, и это работает с приведенным мной примером, но, к сожалению, мне нужно добавить к моему примеру. Мои извенения - person FamousAv8er; 06.04.2021
comment
Я изменил пример, если вы хотите изменить свой ответ - person FamousAv8er; 06.04.2021
comment
@ FamousAv8er Я обновил - person captain-yossarian; 06.04.2021
comment
спасибо, это работает. Если можно, опишите подробнее, почему это работает и почему следует использовать этот интерфейс. Спасибо - person FamousAv8er; 06.04.2021
comment
Спасибо за обновление, я приму этот ответ. Я думаю, что понимаю, что касается null. Меня немного больше интересует, почему HTMLDivElement может обрабатывать ref, а HTMLElement - нет. - person FamousAv8er; 06.04.2021
comment
Интерфейс HTMLElement - это родительский интерфейс для всех элементов HTML. Это не работает, потому что вы не можете создать HTMLElement буквально. Вы можете создавать только HTMLDivElement, HTMLSpanElement, HTMLAnchorElement и т. Д. Итак, React / JSX может принимать только элемент HTML {element}. Например, он жалуется, что HTMLElement не имеет свойства allign. Наведите указатель мыши на атрибут ref в вашей среде IDE, нажмите Ctrl и щелкните атрибут ref. Он должен перенаправить вас на типы ссылок - person captain-yossarian; 06.04.2021

arrow_upward
2
arrow_downward

Ключ должен использовать HTMLElement и undefined для инициализации

const node = useRef<HTMLElement>();
person a2best    schedule 06.04.2021