reactjs - 无法分配 RefObject到 RefObject实例
问题描述
在 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
extends HTMLElement
。我希望 ref 类型是分配兼容的,因为它们显然有重叠。
在不更改要使用的成员变量的情况下,这里的正确方法是什么HTMLDivElement
?
解决方案
这并不是我原来问题的真正答案,而是一个简单的解决方法,它可以很好地完成工作:
const trigger = <div
ref={this.triggerRef as React.RefObject<HTMLDivElement>}
className={className}
style={style}
/>