Création de composants génériques dans React Javascript

Question

J'essaie de construire un composant de sélection React qui peut supporter plusieurs types de composants enfants différents.

J'aimerais faire quelque chose comme ça :

export const GenericSelect = (props) => {
  const { component, items } = props;
  return <>{items && items.map((item, index) => <component id={items.id} name={item.name} />)}</>;
};

Et ensuite être capable de l'utiliser comme :

<GenericSelect component={NonGenericCard} items={items} />

Alors que NonGenericCard prend en charge un ensemble fixe de propriétés (par exemple, id, name), qui seront remplies à partir des valeurs de l'objet items.

J'ai essayé, mais il semble qu'il ne puisse pas créer le fichier <component/> au moment de l'exécution.

Est-ce possible en Javascript ? Si oui, comment le faire ?

Answer 1

En JSX, les noms de balises en minuscules sont considérés comme des balises HTML. Vous devez donc utiliser Component au lieu de component .

L'identifiant devrait également être item.id au lieu de items.id et vous devez donner une clé à chaque élément.

export const GenericSelect = (props) => {
  const { Component, items } = props;
  return (
    <>
      {items &&
        items.map((item, index) => (
          <Component key={item.id} id={item.id} name={item.name} />
        ))}
    </>
  );
};

<GenericSelect Component={NonGenericCard} items={items} />

https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized