RefObject를 RefObject 인스턴스에 할당할 수 없습니다.

RefObject를 RefObject 인스턴스에 할당할 수 없습니다.

React 구성 요소에서 유형(div, img 등)이 다를 수 있는 하위 노드에 대한 참조를 유지하려고 합니다.그래서 저는 멤버 변수를 정의했습니다.

export class MyComp extends Component<IProperties, IState> {

    private triggerRef = React.createRef<HTMLElement>();

...
}

필요한 ref를 보관하는 데 사용할 수 있습니다.

    const trigger = <div ref={this.triggerRef} className={className} style={style} />;

그러나 오류가 발생합니다.

Type 'RefObject<HTMLElement>' is not assignable to type 'string | ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined'.
  Type 'RefObject<HTMLElement>' is not assignable to type 'RefObject<HTMLDivElement>'.
    Property 'align' is missing in type 'HTMLElement' but required in type 'HTMLDivElement'.ts(2322)
lib.dom.d.ts(6708, 5): 'align' is declared here.
index.d.ts(143, 9): The expected type comes from property 'ref' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

라인Type 'RefObject<HTMLElement>' is not assignable to type 'RefObject<HTMLDivElement>'두 개의 ref 객체 유형이 호환되지 않는다고 말합니다.HTMLDivElement확장된HTMLElement저는 ref 유형이 중복되는 것이 분명하기 때문에 과제 호환이 가능할 것으로 예상합니다.

여기서 사용할 멤버 변수를 변경하지 않고 올바른 접근 방식은 무엇입니까?HTMLDivElement?

이것은 제 원래 질문에 대한 대답이 아니라 쉬운 해결 방법이며 일을 잘 해냅니다.

const trigger = <div 
    ref={this.triggerRef as React.RefObject<HTMLDivElement>}
    className={className}
    style={style}
/>

DOM Element를 사용하여 작업하는 사용자 지정 후크를 작성할 때 이 문제가 발생하여 이 스레드에 오는 모든 사용자에게 다음 작업이 수행됩니다.

function useMyCustomHook<T extends HTMLElement>{
    const myRef = useRef<T>(null)

    // do something with the ref, e.g. adding event listeners

    return {ref: myRef}
}

function MyComponent(){
    const {ref: myElementRef} = useMyCustomHook<HTMLDivElement>()

    return <div ref={myElementRef}>A Div</div>
}

바꾸다

private triggerRef = React.createRef<HTMLElement>();

특정 요소 유형으로:

private triggerRef = React.createRef<HTMLDivElement>();`

그리고 나서.ref={this.triggerRef}(좋아요를 던질 필요 없이) 작동할 것입니다.ref={this.triggerRef as React.RefObject<HTMLDivElement>}).

이것은 나에게 효과가 있었습니다.

const refPanel_1 = useRef<null | HTMLDivElement>(null);

언급URL : https://stackoverflow.com/questions/61102101/cannot-assign-refobjecthtmldivelement-to-refobjecthtmlelement-instance