Búsqueda de sitios web

reactjs - No se puede asignar RefObject<HTMLDivElement> a una instancia de RefObject<HTMLElement>

En un componente de React quiero mantener una referencia a un nodo hijo que puede diferir en tipo (div, img, etc.). Así que definí una variable miembro:

export class MyComp extends Component<IProperties, IState> {

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

...
}

y quiero usar eso para mantener la referencia requerida:

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

Sin embargo, esto produce un error:

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

La línea Type 'RefObject<HTMLElement>' no es asignable al tipo 'RefObject<HTMLDivElement>' indica que los dos tipos de objetos ref son incompatibles, aunque HTMLDivElement extiende HTMLElement. Esperaría que los tipos de ref fueran compatibles para asignación ya que claramente tienen una superposición.

¿Cuál es el enfoque correcto aquí, sin cambiar la variable miembro para usar HTMLDivElement?

Respuesta #1

Esto no es realmente una respuesta a mi pregunta original, pero es una solución fácil y cumple su propósito de manera efectiva:

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

Respuesta #2

Para todas las personas que vienen a este hilo porque se encuentran con este problema al escribir un hook personalizado haciendo algo con un elemento DOM, lo siguiente funciona:

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

Artículos relacionados