Comment afficher un tableau d'objets dans React ?

Comment afficher un tableau d'objets dans React

Dans React, l'affichage d'un tableau d'objets nécessite un processus de mappage pour transformer le tableau en éléments visibles.

Mappage de tableaux aux éléments rendus

Pour restituer un tableau d'objets, vous pouvez utiliser la fonction .map(). Cette fonction prend une fonction de rappel qui accepte des éléments individuels du tableau en entrée.

Option 1 : stockage des éléments mappés dans une variable

<code class="javascript">render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);

    return (
      <div>
      {listItems }
      </div>
    );
  }</code>

Ici, la variable listItems stocke les éléments mappés, qui sont ensuite rendus dans un

.

Option 2 : Mappage direct dans le retour

Alternativement, vous pouvez éliminer le besoin d'un variable intermédiaire :

<code class="javascript">render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    return (
      <div>
      {data.map(function(d, idx){
         return (<li key={idx}>{d.name}</li>)
       })}
      </div>
    );
  }</code>

Dans cette variante, la fonction de mappage est directement appelée dans l'instruction return.

Clés pour les identifiants uniques

Quand tableaux de rendu, il est essentiel de fournir des clés uniques pour chaque élément. Dans les deux options, une clé est ajoutée à chaque élément rendu pour optimiser les performances de rendu et permettre des mises à jour efficaces.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Array for map function this display transform input

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn