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

Comment restituer efficacement des tableaux dans React ?

Barbara Streisand
Barbara Streisandoriginal
2024-11-06 07:25:031018parcourir

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>

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>

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!

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