Comment restituer efficacement des tableaux dans 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!