React Basics~fonction de carte/une liste de données~

• Quand on veut afficher une liste de données, comment fait-on ?

・src/Example.js

const animals = ["Dog", "Cat", "Rat"];

const Example = () => {
  return (
    <>
      <ul>
        {/* Not using the map function. */}
        <li>{animals[0]}</li>
        <li>{animals[1]}</li>
        <li>{animals[2]}</li>
      </ul>
    </>
  );
};

export default Example;

• Ce code affiche correctement une liste de données.

・src/Example.js

const animals = ["Dog", "Cat", "Rat"];

const Example = () => {
  return (
    <>
      <ul>
        {/* Using the map function. */}
        {animals.map((animal) => (
          <li> {animal}</li>
        ))}
      </ul>
    </>
  );
};

export default Example;

• Lorsque nous souhaitons afficher une liste de données, la fonction Carte est souvent utilisée pour afficher un tableau de données comme

élément.

• N'oubliez pas de mettre l'attribut clé sur le champ

élément.

• Ce code est plus propre que le précédent.

・Ceci est l'avertissement de la console, au cas où nous ne mettrions pas l'attribut clé sur le

élément.

・Voici le résultat à l'écran.

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!