Rendu React d'un tableau de composants

Question

Question rapide. Quelqu'un sait-il comment rendre un tableau de composants ? J'essaie de faciliter la tâche d'un développeur qui souhaite modifier un composant particulier. (C'est comme un tableau de bord).

Fichier de la liste des composants

import React from 'react';
export default [
    <ComponentOne/>
    <ComponentTwo/>
];

Composant du tableau de bord

import React from 'react';

import components from './../../components';

export default class Dashboard extends React.Component 
{
    render = () => {
        //Want to render the array of components here.
        return (
            <div className="tile is-parent">
                {components}
            </div>
        );
    };
}

Le problème est que j'ai un tableau de composants auquel je dois ajouter une clé. Cependant ! Je n'arrive pas à ajouter une clé au composant. Je ne sais pas comment l'expliquer, alors voici le code que j'ai essayé :

{components.map((component, key) => (
    <component key={key}/>
}

Si je fais ce qui précède, je n'obtiens pas d'erreur 'vous devez appliquer une clé', mais rien ne s'affiche ? Je suppose que c'est parce que le "composant" n'existe pas ou quelque chose de bizarre de ce genre.

J'ai aussi essayé component.key = key; mais il ne me permet pas de le faire sur ce type d'objet apparemment ?

Je suppose que ma solution de rechange est de renvoyer une fonction raccourcie au lieu d'un tableau, mais je préfère le tableau pour une raison quelconque ? Il semble plus simple pour les juniors.

Answer 1

C'est assez simple, il suffit d'envelopper votre composant dans div et passer key comme je l'ai fait ci-dessous :

const Example = ({components}) => (
  <div>
    {components.map((component, i) => <div key={i}>{component}</div>)}    
  </div>
)

Worked example