Maison > interface Web > js tutoriel > Comment restituer efficacement des tableaux dans React ?

Comment restituer efficacement des tableaux dans React ?

Barbara Streisand
Libérer: 2024-11-06 07:25:03
original
1021 Les gens l'ont consulté

How to Efficiently Render Arrays in React?

Le rendu des tableaux React rendu facile

Le rendu d'une liste d'éléments dans React est une tâche courante. Voici comment le faire efficacement :

Première méthode :

<code class="javascript">render() {
    const data =[{&quot;name&quot;:&quot;test1&quot;},{&quot;name&quot;:&quot;test2&quot;}];
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>;
    
    return (
      <div>{listItems}</div>
    );
  }</code>
Copier après la connexion

Cette méthode consiste à créer un tableau d'éléments React, puis à les restituer dans un conteneur div.

Deuxième méthode :

<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

Cette méthode utilise la fonction map directement dans l'instruction return, ce qui simplifie la syntaxe.

L'une ou l'autre de ces méthodes peut être utilisé pour restituer des tableaux d'objets dans React, selon vos préférences.

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal