useRef TypeScript - LegacyRef 유형에 할당할 수 없습니다.

useRef TypeScript - LegacyRef 유형에 할당할 수 없습니다.

사용하려고 합니다.useRefTypeScript에 문제가 있습니다.

내 거랑RefObject(아마도) 접속할 필요가 있다current(즉,node.current)

나는 다음을 시도했다.

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

근데 제가 세팅하러 갔을 때refX는 항상 듣고 있다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>
}

위의 어느 것도 나에게 효과가 없었지만, 그 해결책은 꽤 간단했다.

잘못된 것은 useRef 초기화 파라미터로 명시적으로 "null"을 포함하지 않은 것뿐입니다(정의되지 않은 null이 필요합니다).또, 「」는 사용할 수 없습니다.HTLEMENT'는 당신의 레퍼런스 타입으로 좀 더 구체적으로 설명해야 하기 때문에 저는 'HTMlement'였습니다.예를 들어 HTMLDivElement).

그래서 작업 코드는 다음과 같습니다.

const ref = useRef<HTMLDivElement>(null);

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

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

업데이트 했어요.사용하다HTMLDivElement대신 범용 파라미터로서HTMLElement | null.또한.contains는 인수를 상정하고 있습니다.

갱신하다 useRef에서는 DOM 요소 유형의 범용 인수가 필요합니다.사용할 필요가 없습니다.| null왜냐면RefObject는 것은 이미 알고 있다currentnull일 수 있습니다.

다음 유형을 참조하십시오.

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

TS & React는 고객의 레퍼런스가 무효일 수 있음을 충분히 파악할 수 있습니다.

심판을 받으러 왔어요아마도 이 솔루션은 같은 것을 찾고 있는 다른 누군가에게 도움이 될 것입니다.교체했습니다.HTMLDivElement와 함께HTMLIFrameElement따라서:

const node = useRef<HTMLIFrameElement>(null);

selfref = React.createRef<HTMLInputElement>()

내가 정확한 TS 타입을 알려줬더니 편집자가 통과했어.이제 잘 되네.

같은 줄임<svg>요소:

const ref = useRef<SVGSVGElement>(null)
...
<svg ref={ref} />

중요한 것은 HTLelement를 사용하고 초기화에 정의되어 있지 않다는 것입니다.

const node = useRef<HTMLElement>();

여기 있는 모든 답변을 살펴본 결과, 그 중 어느 것도 문제에 대한 완전한 답변/해명을 할 수 있을지 모르겠습니다.이 경우 문제는 두 가지입니다.

• 다른 HTML 인터페이스 오브젝트를 사용해야 합니다.-> HTMLDivElement
• 참조 초기화에 기본값을 전달해야 합니다.

React useRef 함수는 실제로 3개의 다른 시그니처를 가집니다(React 16.8).

전달된 기본값이 일반 유형과 동일한 유형인 경우

function useRef\<T>(initialValue: T): MutableRefObject<T>;

범용 타입 OR null과 같은 타입의 디폴트값을 전달했을 경우(여기서 많은 응답에 나타나 있음)

function useRef\<T>(initialValue: T|null): RefObject<T>;

디폴트값 및/또는 를 전달하지 않으면 범용 타입을 전달하지 않습니다.

function useRef\<T = undefined>(): MutableRefObject<T | undefined>;

진짜 문제는 MutableRefObject와 LegacyRef의 비호환성으로 귀결됩니다.React 팀은 레퍼런스의 데이터 타입을 변경했기 때문에 패스한 내용에 따라 여러 서명과 레퍼런스의 타입이 있을 것으로 추측됩니다.

적어도 일반적인 TS 오류 메시지는 문제가 있는 부분을 즉시 발견하기에 충분하지 않기 때문에 react eslint에서 더 좋은 오류 메시지를 받는 것이 좋습니다.

Tl;dr: null을 useRef 객체의 기본값으로 전달하면 MutableRefObject와 LegacyRef를 모두 충족하는 참조 객체가 반환됩니다(아마도).

회피책으로서 명시적으로 캐스트를 실시할 수 있습니다.

const ref = useRef<HTMLDivElement>();
...
<input
      ref={ref as RefObject<HTMLInputElement>}
      ...
/>

언급URL : https://stackoverflow.com/questions/66963289/useref-typescript-not-assignable-to-type-legacyrefhtmldivelement