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是一个render function，它接收props和ref参数并返回一个React节点-它是 no 组件：

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

这也是原因，为什么RefForwardingComponent是deprecated偏爱ForwardRefRenderFunction，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} />在功能上是等效的，但具有不同的名称以使区分更加清楚。

您使用React.forwardRef将render函数变成一个接受引用的实际组件：

{{1}}

Answer 2

自定义功能组件不能以“ ref”作为道具。您将不得不给它一个不同的名字。例如，“ 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>}

Answer 3

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

使用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 4

我认为这是React RefForwardingComponent的类型定义中的错误。您可以通过在道具中添加ref?: React.RefObject<HTMLDivElement>来解决此问题。这将解决您的编译器错误。

尝试一下：

type IMyComponentProps = {
    ref?: React.RefObject<HTMLDivElement>
}

我认为此要求是一个错误，因为RefForwardingComponent应该将其添加到道具中。将其放在您自己的道具中意味着TypeScript将期望函数中的props自变量包含ref道具，但我认为它不会。但是，这不是一个大问题。

打字稿RefForwardingComponent无法正常工作

4 个答案: