无法将 RefObject<HTMLDivElement> 分配给 RefObject<HTMLElement> 实例答案

【问题标题】：Cannot assign RefObject<HTMLDivElement> to RefObject<HTMLElement> instance无法将 RefObject<HTMLDivElement> 分配给 RefObject<HTMLElement> 实例
【发布时间】：2020-07-20 22:45:23
【问题描述】：

在 React 组件中，我想保留对类型不同（div、img 等）的子节点的引用。于是我定义了一个成员变量：

export class MyComp extends Component<IProperties, IState> {

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

...
}

并想用它来保存所需的参考：

    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？

【问题讨论】：

创建联合是否可行？ IE。 private triggerRef = React.createRef<PossibleHTMLElements>();type PossibleHTMLElements = HTMLDivElement | HTMLImageElement | ... =
是的，这是一种可能的方式。我已经在@keikai 的（现已删除的）答案中讨论了这一点。虽然我更感兴趣的是为什么我不能将HTMLDivElement 类型的引用分配给HTMLElement 类型的引用。元素是直接兼容的，只是不是 ref 类型。

标签： reactjs typescript

【解决方案1】：

这并不是我最初问题的真正答案，而是一个简单的解决方法，它可以很好地完成工作：

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

【讨论】：

【解决方案2】：

对于所有来此线程的人，因为他们在编写自定义挂钩时遇到此问题，使用 DOM 元素做某事，以下工作：

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

【讨论】：