Reactjs 在React with Typescript中为重新对象使用可分配类型

我正在使用React和Typescript以及Material UI。我想传一个裁判作为道具。在WidgetDialog中，我有

export interface WidgetDialogProps {
   ....
    ref?: React.RefObject<HTMLDivElement>;
}

....

<div data-id={dataId} className={classes.dialog} ref={ref}>
       --- dialog content ---          
</div>

导出接口WidgetDialogProps{
....
ref？：React.reObject；
}
....
---对话框内容--

当我想在其他组件中使用它时：

 const canvasRef = React.useRef<HTMLDivElement>(null);

 <WidgetDialog
     ref={canvasRef}
     ....
  >
....
</WidgetDialog>

const canvasRef=React.useRef（null）；
....

我正在获取此类型错误：

Type 'RefObject<HTMLDivElement>' is not assignable to type '(string & RefObject<HTMLDivElement>) | (((instance: Component<WidgetDialogProps, any, any> | null) => void) & RefObject<...>) | (RefObject<...> & RefObject<...>) | undefined'.
  Type 'RefObject<HTMLDivElement>' is not assignable to type 'RefObject<Component<WidgetDialogProps, any, any>> & RefObject<HTMLDivElement>'.
    Type 'RefObject<HTMLDivElement>' is not assignable to type 'RefObject<Component<WidgetDialogProps, any, any>>'.
      Type 'HTMLDivElement' is missing the following properties from type 'Component<WidgetDialogProps, any, any>': context, setState, forceUpdate, render, and 3 more.ts(2322)
index.d.ts(107, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<WidgetDialogProps, any, any>> & Readonly<...> & Readonly<...>'

类型“重新对象”不可分配给类型“（字符串和重新对象）|（（（实例：组件| null）=>void）和重新对象）|（重新对象和重新对象）|未定义”。
类型“REOBJECT”不可分配给类型“REOBJECT&REOBJECT”。
类型“REOBJECT”不可分配给类型“REOBJECT”。
类型“HtmlDevice”缺少类型“Component”中的以下属性：上下文、setState、forceUpdate、render和其他3个.ts（2322）
index.d.ts（107，9）：预期的类型来自属性'ref'，该属性在类型'IntrinsicatAttributes&IntrinsicClassAttributes&Readonly&Readonly'上声明

---

接口中ref的正确类型是什么？

我认为

ref

是一个保留属性，发生错误是因为

WidgetDialog

试图使用它。尝试将属性名称更改为其他名称，例如：

export interface WidgetDialogProps {
   ....
    rif?: React.RefObject<HTMLDivElement>;
}

....

<div data-id={dataId} className={classes.dialog} ref={rif}>
       --- dialog content ---          
</div>

 const canvasRef = React.useRef<HTMLDivElement>(null);

 <WidgetDialog
     rif={canvasRef}
     ....
  >
....
</WidgetDialog>

导出接口WidgetDialogProps{
....
rif？：React.reObject；
}
....
---对话框内容--
const canvasRef=React.useRef（null）；
....

---

另请参见：

我认为

ref

是一个保留属性，发生错误的原因是

widgetloalog

试图使用它。尝试将属性名称更改为其他名称，例如：

export interface WidgetDialogProps {
   ....
    rif?: React.RefObject<HTMLDivElement>;
}

....

<div data-id={dataId} className={classes.dialog} ref={rif}>
       --- dialog content ---          
</div>

 const canvasRef = React.useRef<HTMLDivElement>(null);

 <WidgetDialog
     rif={canvasRef}
     ....
  >
....
</WidgetDialog>

导出接口WidgetDialogProps{
....
rif？：React.reObject；
}
....
---对话框内容--
const canvasRef=React.useRef（null）；
....

---

另请参见：

不工作：类型“{children:（false | Element）[]；数据id:string；className:string；ruf:reObject | undefined；}”不可分配给类型“DetailedHTMLProps”。类型“DetailedHTMLProps”上不存在属性“ruf”。TS2322 58 | onClose={onClose}59 |>>60 |但这次是“不存在”！您是否也更改了接口签名？是的。我将其添加到WidgetDialogProps接口无效：类型“{children:（false | Element）[]；数据id:string；className:string；ruf:reObject | undefined；}”不能分配给类型“DetailedHTMLProps”。类型“DetailedHTMLProps”上不存在属性“ruf”。TS2322 58 | onClose={onClose}59 |>>60 |但这次是“不存在”！您是否也更改了接口签名？是的。我将其添加到WidgetDialogProps界面