In a React component I want to keep a reference to a child node which can differ in type (div, img etc.). So I defined a member variable:
export class MyComp extends Component<IProperties, IState> {
private triggerRef = React.createRef<HTMLElement>();
...
}
and want to use that to hold the required ref:
const trigger = <div ref={this.triggerRef} className={className} style={style} />;
Though, this produces an 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>'
The line Type 'RefObject<HTMLElement>' is not assignable to type 'RefObject<HTMLDivElement>' says the two ref object types are incompatible, even though HTMLDivElement extends HTMLElement. I'd expect that the ref types are assignment compatible as they clearly have an overlap.
What is the correct approach here, without changing the member variable to use HTMLDivElement?
This is not really an answer to my original question, but an easy workaround and it does the job nicely:
const trigger = <div
ref={this.triggerRef as React.RefObject<HTMLDivElement>}
className={className}
style={style}
/>
For all people coming to this thread because they encounter this problem when writing a custom hook doing something with a DOM Element, the following works:
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>
}