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

大家好，我们又见面了啊~本文《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”错误如何解决？》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注米云公众号！

代理获取 URL 资源为何无法自动添加 localhost 前缀？