Comment afficher un tableau d'objets dans React ?-js tutoriel-php.cn

Comment afficher un tableau d'objets dans React ?

Barbara Streisand

Libérer： 2024-11-07 21:13:02

original

972 Les gens l'ont consulté

How to Display an Array of Objects in 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>

Copier après la connexion

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>

Copier après la connexion

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!