reactjs - typescript RefForwardingComponent无法正常工作

我正在尝试使我的组件接受引用。

我有一个像这样的组件:

const MyComponent: RefForwardingComponent<HTMLDivElement, IMyComponentProps> = (props, ref) => {
    return <div ref={ref}>Hoopla</div>
}

但是，当我尝试将ref传递给时，就像这样:

<MyComponent ref={myRef}></MyComponent>

...我得到这个错误:

Property 'ref' does not exist on type 'IntrinsicAttributes & IMyComponentProps & { children?: ReactNode; }'.ts(2322)

我究竟做错了什么？

最佳答案

RefForwardingComponent是render function，它接收props和ref参数并返回一个React节点-它不是组件:



这也是为什么RefForwardingComponent是deprecated而不是ForwardRefRenderFunction的原因，React.forwardRef在功能上是等效的，但具有不同的名称以使区分更加清楚。

您可以使用 ojit_code 将render函数变成一个接受引用的实际组件:

import React, { ForwardRefRenderFunction } from 'react'

type IMyComponentProps = { a: string }
const MyComponentRenderFn: ForwardRefRenderFunction<HTMLDivElement, IMyComponentProps> =
    (props, ref) => <div ref={ref}>Hoopla</div>

const MyComponent = React.forwardRef(MyComponentRenderFn);
const myRef = React.createRef<HTMLDivElement>();

<MyComponent a="foo" ref={myRef} />

关于reactjs - typescript RefForwardingComponent无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58991706/