React Basics~Kartenfunktion/eine Liste von Daten~

• Wie gehen wir vor, wenn wir eine Liste mit Daten anzeigen möchten?

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

• Dieser Code zeigt eine Liste der Daten korrekt an.

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

• Wenn wir eine Liste von Daten anzeigen möchten, wird die Kartenfunktion häufig verwendet, um ein Datenarray wie

anzuzeigen. Element.

• Bitte vergessen Sie nicht, das Schlüsselattribut auf das Feld

zu setzen. Element.

• Dieser Code ist sauberer als der vorherige.

・Dies ist die Warnung der Konsole für den Fall, dass wir das Schlüsselattribut nicht auf das

setzen. Element.

・Dies ist das Ergebnis auf dem Bildschirm.

Das obige ist der detaillierte Inhalt vonReact Basics~Kartenfunktion/eine Liste von Daten~. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!