Typescript RefForwardingComponent not working

Question

I am trying to make my component accept a ref.

I have a component like so:

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

But when I try to pass a ref to is like so:

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

... I get this error:

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

What am I doing wrong?

Enloe

Answer 1

RefForwardingComponent is a render function, which receives props and ref parameters and returns a React node - it is no component:

The second ref argument only exists when you define a component with React.forwardRef call. Regular function or class components don’t receive the ref argument, and ref is not available in props either. (docs)

That is also the reason, why RefForwardingComponent is deprecated in favor of ForwardRefRenderFunction, which is functionally equivalent, but has a different name to make the distinction clearer.

You use React.forwardRef to turn the render function into an actual component that accepts 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} />

Discursion

Answer 2

Your code is right but you are missing a small detail.

When you use RefForwardingComponent you need to export the component wrapped with 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);

Swords

OP's issue is a compile-time Type error. It will not be fixed by forwardRef. A missing forwardRef will eventually cause a runtime error: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?. So OP does need forwardRef, but he hasn't made it that far yet. – Diazonium

@Diazonium , You are right the issue is a compile-time Type error. The type that is returned by forwardRef function is a type that accepts the ref prop. ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> This basically wraps your component accepting your props (** PropsWithoutRef**) and the 'ref' prop (RefAttributes) – Unblown

Answer 3

I think this is a bug in React's type definitions for RefForwardingComponent. You can work around this by adding the ref?: React.RefObject<HTMLDivElement> to your props. This will fix your compiler error.

try this:

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

I believe this requirement is a bug, because it should be added to the props for you by RefForwardingComponent. Putting it in your own props means that TypeScript will expect the props argument inside your function to contain the ref prop and I don't think it does. This however is not a big problem.

Diazonium

Answer 4

Custom function components can't have 'ref' as a prop. You will have to give it a different name. 'yourRef', for example will be inside the props object.

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

So to use the ref prop:

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

or you can descructure the props:

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

Pantalets

Maybe I am mistaken, but I thought that RefForwardingComponent is suppose to make your custom components accept a ref? – Enloe