
如何避免“类型“never”上不存在属性“childfocusfn”。ts(2339)”错误
在react中使用forwardref和useimperativehandle创建可定制组件时,可能会遇到 “类型“never”上不存在属性“childfocusfn”。ts(2339)”错误。
原因:
默认情况下,useimperativehandle的第二个参数(ref)类型为never。这意味着在 ref.current 上访问属性时,编译器无法确认其类型。
解决方法:
要避免此错误,需明确指定 useimperativehandle的第二个参数类型。例如,对于focus()方法,可以将类型指定为() => void:
const ref = useref< { childfocusfn: () => void }>(null);修改后的完整代码示例:
import { forwardRef, useState, LegacyRef, useRef, Ref, createRef, useImperativeHandle } from 'react'
import './App.css'
// 子组件
const ChildComp = forwardRef((props, ref) => {
const childRef = createRef<HTMLInputElement>()
useImperativeHandle(ref, () => ({
childFocusFn: () => {
childRef.current?.focus()
console.log("childFocusFn called.")
}
}))
return <>
<input defaultValue="我是子组件" type='text' ref={childRef}/>
</>
}
)
function App() {
const ref = useRef< { childFocusFn: () => void }>(null);
const clickFn = () => {
if(ref.current) {
ref.current.childFocusFn()
}
}
return (
<>
<ChildComp ref={ref}/>
<button onClick={clickFn}>点击调用子组件方法</button>
</>
)
}
export default App










