Javascript 如何在ReactJS中使用TypeScript和forwardRef？

将

forwardRef

与TypeScript一起使用时出现问题

我想要什么？ 将类型化引用传递给子组件

我得到了什么 console.log的值-

子组件null

父组件的代码

  // component parent
  import { FormHandles } from '@unform/core';

  export const App = () => {
    const formRef = createRef<FormHandles>();

    return (
      <Child ref={formRef} />
    )
  }

  // component child
  import { FormHandles } from '@unform/core';

  export const Child = forwardRef<FormHandles>((props, ref) => {
    console.log('child component', ref.current);
    
    return (
      <div>any thing</div>
    )
  })

//组件父级
从'@unform/core'导入{FormHandles}；
导出常量应用=（）=>{
const formRef=createRef（）；
返回(
)
}

子组件的代码

  // component parent
  import { FormHandles } from '@unform/core';

  export const App = () => {
    const formRef = createRef<FormHandles>();

    return (
      <Child ref={formRef} />
    )
  }

  // component child
  import { FormHandles } from '@unform/core';

  export const Child = forwardRef<FormHandles>((props, ref) => {
    console.log('child component', ref.current);
    
    return (
      <div>any thing</div>
    )
  })

//组件子级
从'@unform/core'导入{FormHandles}；
export const Child=forwardRef（（props，ref）=>{
console.log（'子组件'，参考当前版本）；
返回(
任何事
)
})

导入React，{createRef，forwardRef}来自“React”；
类型Props={children:React.ReactNode；类型：“submit”|“button”}；
类型Ref=HTMLButtoneElement；
const Child=React.forwardRef（（props，ref）=>{
控制台日志（ref）；
返回（{props.children}）；
});
函数App（）{
const ref=React.createRef（）；
返回(
点击我
)
}
导出默认应用程序；

使用

useRef

钩住

App

创建（并使用已创建的访问）引用。为什么它

null

？这取决于你的代码。它也可能是

未定义的

，因为您在

createRef（）中没有给它初始值那么，它应该从哪里获得值？