reactjs - Typescript RefForwardingComponent fungerar inte

Jag försöker få min komponent att acceptera en ref.

Jag har en komponent som så:

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

Men när jag försöker skicka en referens blir det så här:

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

... Jag får det här felet:

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

Vad gör jag för fel?

Svar #1

RefForwardingComponent är en renderfunktion som tar emot props- och ref-parametrar och returnerar en React-nod - det är ingen komponent:

Den andra ref-argumentet finns endast när du definierar en komponent med React.forwardRef-anrop. Vanliga funktion- eller klasskomponenter får inte ref-argumentet, och ref är inte tillgängligt i props heller. (dokumentation)

Det är också anledningen till varför RefForwardingComponent är föråldrad till förmån för ForwardRefRenderFunction, som är funktionellt ekvivalent, men har ett annat namn för att göra skillnaden tydligare.

Du använder React.forwardRef för att göra renderingsfunktionen till en faktisk komponent som accepterar 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} />

Svar #2

Din kod är korrekt men du saknar en liten detalj.

När du använder RefForwardingComponent behöver du exportera komponenten inlindad med 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);

Relaterade artiklar