Comment restituer des tableaux d'objets dans React ?

Rendu de tableaux d'objets dans React

Dans React, l'affichage d'une liste de données à partir d'un tableau d'objets nécessite une approche légèrement différente de celle traditionnelle HTML.

Approche 1 : Créer un tableau d'éléments React

Une façon de restituer un tableau d'objets dans React consiste à créer d'abord un tableau d'éléments React, chacun représentant un seul élément du tableau. Voici un exemple :

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

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

Cette approche crée un nouvel élément React pour chaque élément du tableau, garantissant que chaque élément possède une clé unique d'identification.

Approche 2 : Fonction de mappage en ligne dans Return

Une méthode alternative consiste à inclure la fonction de mappage directement dans l'instruction de retour JSX :

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

Cette approche élimine le besoin de créer un tableau distinct de Éléments React, rendant le code plus concis.

Propriété clé

Il est important d'attribuer une propriété clé unique à chaque élément React lors du rendu d'une liste d'objets. Cela permet à React d'identifier et de mettre à jour efficacement des éléments spécifiques dans le DOM lorsque les données changent.

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!