Reactjs 我能'；t使用typescript中的useRef钩子正确键入ref

我试图将引用从父组件（EditableCell）传递到子组件（Input），并在单击父组件时使用其

.current.focus

属性

我正在使用typescript使用

forwardRef

函数，但我无法正确键入它

界面道具{
//一些道具类型
}
常量单元格可编辑=（道具：道具）=>{
const[isEditing，setEditing]=useState（false）
常量inputRef=useRef（null）
常量handleClick=（）=>setEditing（！isEditing）
常量选项={
参考：inputRef，
价值：道具价值，
onChange:props.onChange
}
返回(
{
编辑
? 
：{props.value}
}
)
}

界面道具{
//一些道具类型
}
类型Ref=HTMLInputElement
常量InputText=forwardRef（（道具：道具，参考：参考）=>{
useffect（（）=>{
参考？.current？.focus（）
})
返回(
)
})

使用上面的代码，我得到以下错误：

类型为“（props:props，ref:ref）=>JSX.Element”的参数不能分配给类型为“ForwardRefRenderFunction”的参数。 参数“ref”和“ref”的类型不兼容。 类型“（（实例：未知）=>void）| mutableReObject | null”不可分配给类型“HTMLInputElement”。 类型“null”不可分配给类型“HTMLInputElement”。TS2345 如果我用泛型键入forwardRed，我会得到另一种错误：

const InputText=forwardRef（（props，ref）=>{…}

属性“current”在类型“（（实例：HTMLInputElement | null）=>void）| MutableRefObject”上不存在。
类型（实例：HTMLInputElement | null）=>void.TS2339上不存在属性“current”

最后，键入ref作为

any

不会给我任何错误

---

我是Typescript新手，不理解上面提到的错误。

请查看以下沙盒：

---

TypeScript警告您ref可能为null，因此任何带有

ref.current

的代码都应该用if语句包装，这将确保

ref.current

存在。

forwardRef（（props，ref）=>{}）

-您能试试吗？我得到第二个错误：

属性“current”在type上不存在（（例如：HTMLInputElement | null）=>void）| mutableReObject.

谢谢@Konstantin，但我发现我的代码和你的代码有两个不同。1）我的ref被传递到子组件，我找不到ref props的正确类型（通过forwardRef传递）。使用

any

它可以工作，但在我尝试正确键入它时无法工作。2）

ref？.current？.focus（）

是否已为空检查？然而，我尝试了一个常规的if语句，但它不起作用either@eakl是的，有区别。出于某种原因，ref不是InputText组件的强制属性，尽管我们正确地键入了forwardRef。我想，forwardRef就是这样工作的。。。检查一下：如果您不将inputRef传递给InputText，typescript将不会抱怨任何事情。因此，它在InputText中可能为空。另一方面，您可以在创建inputRef的父组件中调用它。本文中的所有示例都具有相同的模式。