Comment utiliser les génériques dans les props en React dans un composant fonctionnel ?

Question

Dans un composant basé sur des classes, je peux facilement écrire un code comme celui-ci :

import * as React from 'react';
import { render } from 'react-dom';

interface IProps<T> {
    collapsed: boolean;
    listOfData: T[];
    displayData: (data: T, index: number) => React.ReactNode;
}

class CollapsableDataList<T> extends React.Component<IProps<T>> {
    render () {
        if (!this.props.collapsed) {
            return <span>total: {this.props.listOfData.length}</span>
        } else {
            return (
                <>
                    {
                        this.props.listOfData.map(this.props.displayData)
                    }
                </>
            )
        }
    }
}

render(
    <CollapsableDataList
        collapsed={false}
        listOfData={[{a: 1, b: 2}, {a: 3, b: 4}]}
        displayData={(data, index) => (<span key={index}>{data.a + data.b}</span>)}
    />,
    document.getElementById('root'),
)

En fait, cette CollapsableDataList devrait être un composant fonctionnel parce qu'il est sans état, mais je n'arrive pas à trouver comment écrire un composant fonctionnel et utiliser des génériques dans les props, un conseil pour moi ?

Answer 1

Vous ne pouvez pas créer un composant fonctionnel avec une annotation de type et le rendre générique. Cela ne fonctionnera donc PAS comme T n'est pas défini et vous ne pouvez pas le définir au niveau de la variable :

const CollapsableDataList : React.FunctionComponent<IProps<T>> = p => { /*...*/ } 

Vous pouvez cependant sauter l'annotation de type, et rendre la fonction générique et de type props explicitement.

import * as React from 'react';
import { render } from 'react-dom';

interface IProps<T> {
    collapsed: boolean;
    listOfData: T[];
    displayData: (data: T, index: number) => React.ReactNode;
}
const CollapsableDataList = <T extends object>(props: IProps<T> & { children?: ReactNode }) => {
    if (!props.collapsed) {
        return <span>total: {props.listOfData.length}</span>
    } else {
        return (
            <>
                {
                    props.listOfData.map(props.displayData)
                }
            </>
        )
    }
}

render(
    <CollapsableDataList
        collapsed={false}
        listOfData={[{a: 1, b: 2}, {a: 3, c: 4}]}
        displayData={(data, index) => (<span key={index}>{data.a + (data.b || 0)}</span>)}
    />,
    document.getElementById('root'),
)

Answer 2

Le type React.FC est essentiellement ceci :

<P = {}>(props: PropsWithChildren<P>, context?: any) => ReactElement | null

donc à la place de ceci (qui n'est pas autorisé) :

const Example: React.FC<Props<P>> = (props) => {
  // return a React element or null
}

vous pouvez utiliser ceci :

const Example = <P extends unknown>(props: PropsWithChildren<Props<P>>): ReactElement | null => {
  // return a React element or null
}

Par exemple :

const Example = <P extends unknown>({ value }: PropsWithChildren<{ value: P }>): ReactElement | null => {
  return <pre>{JSON.stringify(value)}</pre>
}

Ou, plus strictement, si le composant n'utilise pas l'option children prop et ne reviendra pas null :

const Example = <P>({ value }: { value: P }): ReactElement => {
  return <pre>{value}</pre>
}

puis utiliser le composant typé comme <Example<string> value="foo"/>

Answer 3

type Props<T> = {
    active: T;
    list: T[];
    onChange: (tab: T) => void;
};

export const Tabs = <T,>({ active, list, onChange }: Props<T>): JSX.Element => {
    return (
        <>
            {list.map((tab) => (
                <Button onClick={() => onChange(tab)} active={tab === active}>
                    {tab} 
                </Button>
            ))}
        </>
    );
};

Answer 4

Avant d'aborder le composant fonctionnel, je suppose que l'exemple de code original ne contient pas le composant générique en JSX, car je ne vois pas qu'il soit passé à la fonction IProps l'interface. I. e. :

interface Ab {
  a: number;
  b: number;
}

...

// note passing the type <Ab> which will eventually make it to your IProps<T> interface and cascade the type for listOfData
return (
<CollapsableDataList<Ab>
  collapsed={false}
  listOfData={[{a: 1, b: 2}, {a: 3, c: 4}]}
  ...
/>
)

Ok, maintenant, avec un petit effort, vous pouvez réellement avoir un composant fonctionnel avec des accessoires génériques.

Vous êtes cependant coincé par l'utilisation de la syntaxe "moderne", car elle utilise une fonction d'affectation et de flèche qui n'est d'aucune utilité dans votre cas générique :

// using this syntax there is no way to pass generic props
const CollapsableDataList: React.FC<IProps> = ({ collapsed, listOfData }) => {
  // logic etc.
  return (
  // JSX output
  );
}

Réécrivons l'affectation de variable comme un bon vieux function :

// we are now able to to write our function component with generics
function CollapsableDataList<T>({ collapsed, listOfData }: IProps<T> & { children?: React.ReactNode }): React.ReactElement {
  // logic etc.
  return (
  // JSX output
  );
}

El children n'est pas nécessairement nécessaire si le composant n'utilise pas la prop enfant mais je l'ai ajouté pour souligner le fait qu'il doit être retapé manuellement en tant que React.FC a fait ça pour nous avant.