打字稿 RefForwardingComponent 不起作用

Question

我试图让我的组件接受一个引用。

我有一个像这样的组件：

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)

我究竟做错了什么？

Answer 1

RefForwardingComponent是一个渲染函数，它接收 props 和 ref 参数并返回一个 React 节点 - 它不是组件：

第二个 ref 参数仅在您使用 React.forwardRef 调用定义组件时才存在。常规函数或类组件不接收 ref 参数，并且 ref 在 props 中也不可用。（文档）

这也是原因，为什么RefForwardingComponent被弃用的青睐ForwardRefRenderFunction，这是功能上等同，但有一个不同的名称，使区分更加清晰。

您用于React.forwardRef将渲染函数转换为接受 refs 的实际组件：

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} />

Answer 2

您的代码是正确的，但您缺少一个小细节。

使用时RefForwardingComponent需要导出包裹的组件forwardRef

import React, { forwardRef, RefForwardingComponent } from 'react';

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

export default forwardRef(MyComponent);

Answer 3

自定义函数组件不能将“ref”作为 prop。您必须给它一个不同的名称。例如，“yourRef”将位于 props 对象内。

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

所以要使用 ref 属性：

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

或者你可以解构道具：

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