React中forwardRef和useImperativeHandle导致“类型“never”上不存在属性“childFocusFn”错误如何解决?
如何避免“类型“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
以上就是React中forwardRef和useImperativeHandle导致“类型“never”上不存在属性“childFocusFn”错误如何解决?的详细内容,更多请关注硕下网其它相关文章!