React中forwardRef和useImperativeHandle导致“类型“never”上不存在属性“childFocusFn”错误如何解决？-js教程-PHP中文网

React中forwardRef和useImperativeHandle导致“类型“never”上不存在属性“childFocusFn”错误如何解决？

花韻仙語

发布： 2024-11-18 08:48:29

原创

369人浏览过

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”错误如何解决？的详细内容，更多请关注php中文网其它相关文章！