React.forwardRef 在流中具有通用的 Props 类型

Question

I'm trying to add React.forwardRef to an already existing component that looks like this:

type Props<T> = {
  someProp: T,
}

const Component = <T>({someProp}: Props<T>) => {...}

Now this is component uses Props<T> , where T is some generic type. I'm having difficulties adding React.forwardRef and having no errors and no compromises on typing.

Here are some things I've tried:

// Complains T doesn't exist
const Component = React.forwardRef<Props<T>, HTMLElement>((props, ref) => {...})

// Multiple errors
type Props<T> = {
    value: T,
    onChange: T => void,
}

const ChildComponent = <T>() => React.forwardRef<Props<T>, HTMLDivElement>((props, ref) => {
    return <div ref={ref}>123</div>;
});

const ParentComponent = () => {
    const [value, setValue] = React.useState(123);
    const onChange = newValue => setValue(newValue);

    return <ChildComponent />;
};

===============================================================================================

All branches are incompatible:
 • Either inexact AbstractComponent [1] is incompatible with exact React.Element [2].
 • Or AbstractComponent [1] is incompatible with React.Portal [3].
 • Or property @@iterator is missing in AbstractComponent [1] but exists in $Iterable [4].

    ../x.jsx
       7│   onChange: T => void,
       8│ }
       9│
      10│ const ChildComponent = <T>() => **React.forwardRef<Props<T>, HTMLDivElement>((props, ref) => {
      11│   return <div ref={ref}>123</div>;
      12│ })**;
      13│
      14│ const ParentComponent = () => {
      15│   const [value, setValue] = React.useState(123);

     /private/tmp/flow/flowlib_1eb3ba5b/react.js
 [2]  18│   | React$Element<any>
 [3]  19│   | React$Portal
 [4]  20│   | Iterable<?React$Node>;
        :
 [1] 297│   ): React$AbstractComponent<Config, Instance>;

Do you know how to use forwardRef with generic types in flow?

Answer 1

Does something like this work for you?

import React, { forwardRef } from 'react';

function GenericComponent<T>(props: { someProp: T }) {
  return null;
}

const ForwardedRefGenericComponent = forwardRef(
  (props, ref) => <GenericComponent ref={ref} {...props} />
);


function App() {
  // Examples of using ForwardedRefGenericComponent
  return (
    <div>
      <ForwardedRefGenericComponent someProp={42} />
      <ForwardedRefGenericComponent someProp={"abc"} />
      <ForwardedRefGenericComponent someProp={true} />
      <ForwardedRefGenericComponent someProp={["x", "y"]} />
      <ForwardedRefGenericComponent someProp={{ x: "y" }} />
    </div>
  );
}

Try Flow

Flow should be smart enough to infer the types for you so there's no need to declare the types explicitly for ForwardedRefGenericComponent .

Answer 2

One time generic factory can make Flow happy

/* @flow */

import React from 'react';

type Props<T> = {|
  someProp: T
|};

const withRef = <T>() => React.forwardRef<Props<T>, any>((props, ref) => {
  return (<div ref={ref} />);
});

const Component = withRef<string>();  

Answer 3

Perhaps this example of working code will help future readers on how to use forwardRef with other props in Typescript.

const FancyInput = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>(
  (otherProps, ref) => (
    <input ref={ref} type="text" className="input bg-white py-1 px-2 w-48" {...otherProps} />
  ),
)

Answer 4

It's not exactly what you're asking for, but there is a work-around. The flow docs about HOCs inspired me. Instead of trying to export a component, export a generic component factory. In the file where you want to use the component, create one or more concrete component instances with the factory.

// component definition file
export const createComponent = <T>(): React.AbstractComponent<Props<T>, HTMLElement> =>
  React.forwardRef<Props<T>, HTMLElement>((props, ref) => {...});

// file component is used in
import { createComponent } from './definition';
const ComponentT1 = createComponent<T1>();

const SomeComponent = (): MixedElement => {
  const ref = useRef();
  return <ComponentT1 ref={ref} />
};

The difference from the previous responses is that they use React function components, whereas this uses a plain JavaScript factory, that React doesn't know even existed. It's not a very elegant work-around, but I hope it helps someone out.