Comment restituer un tableau d'objets dans React à l'aide de la fonction Map ?

Rendu d'un tableau d'objets dans React

Le rendu des listes dans React est essentiel pour afficher des données dynamiques. Ce guide montre comment restituer efficacement un tableau d'objets dans React à l'aide de la fonction map.

Approche :

Considérez le composant React suivant :

<code class="javascript">class First extends React.Component {
  render() {
    const data = [{ name: "test1" }, { name: "test2" }];
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);

    return (
      <div>
        Hello
      </div>
    );
  }
}</code>

Il existe deux approches principales pour restituer le tableau d'objets :

Première approche :

Attribuez le tableau mappé à une variable et renvoyez-le dans la fonction de rendu :

<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>

Deuxième approche :

Intégrez directement la fonction map dans l'instruction return :

<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>

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!