Ordnen Sie ein Array von Objekten in React zu

Eines der vielen großartigen Merkmale der React-Bibliothek ist, dass sie hochdynamisch ist und bestimmte Elemente dynamisch rendern und nicht rendern kann.

Webentwickler haben oft große Datenmengen und möchten diese auf dem Bildschirm anzeigen, und normalerweise sind sie als Array von Objekten formatiert. Dieser Artikel zeigt, wie man ein Array von Objekten in React abbildet und diskutiert mögliche Anwendungsfälle für diese Operation.

Verwenden Sie die map()-Methode, um ein Array von Objekten in React abzubilden

Die React-Bibliothek basiert auf JavaScript, sodass Sie Methoden wie map() verwenden können, um ein Array von Objekten zu durchlaufen. Externe Daten werden oft als Array von Objekten gespeichert; Daher müssen Sie bei der Entwicklung von Webanwendungen in React häufig eine Reihe von Objekten zuordnen.

Es gibt mehrere Möglichkeiten, ein Array in JavaScript zu durchlaufen. Sie können die for-Schleife, die forEach()-Methode oder sogar die while-Schleife verwenden.

Jeder Webentwickler bevorzugt die Verwendung von map(), da Sie ein Array von Objekten durchgehen und neue React-Elemente oder -Komponenten innerhalb von JSX generieren können.

JSX ist eine spezielle HTML-ähnliche Syntax zum Erstellen des Layouts von React-Komponenten. Es ermöglicht Ihnen, JavaScript-Ausdrücke in etwas einzubetten, das wie Ihr HTML-Code aussieht.

Dies macht es einfach, React-Elemente, -Komponenten und -Werte dynamisch zu generieren. Andere Möglichkeiten zum Durchlaufen eines Arrays werden in JSX nicht unterstützt, map() ist die einzige unterstützte Methode.

Sehen wir uns ein Beispiel an, wie man ein Array von Objekten in React abbildet:

export default function App() {
  const arr = [
    { name: "Irakli", height: 180 },
    { name: "Chris", height: 190 },
    { name: "Michael", height: 176 },
    { name: "John", height: 182 },
    { name: "Todd", height: 198 },
    { name: "Jack", height: 178 }
  ];
  return (
    <div className="App">
      {arr.map((person) => (
        <div
          style={{
            border: "2px solid black",
            margin: "30px auto",
            width: "30%"
          }}
        >
          <p>name: {person.name}</p>
          <p>height: {person.height}</p>
        </div>
      ))}
    </div>
  );
}

In diesem Beispielcode haben wir ein einfaches Array von Objekten. Jedes Element im Array repräsentiert eine Person.

Sie können sich die Live-Demo auf CodeSandbox ansehen und sehen, was die Methode map() rendert.

Innerhalb von JSX (in der return-Anweisung) haben wir die .map()-Methode verwendet, um jedes Element im Array zu durchlaufen.

Die Methode map() nimmt ein Argument – eine Callback-Funktion, die für jedes Element im Array ausgeführt wird. Die Callback-Funktion akzeptiert ein Argument für jedes Element im Array.

In diesem Fall durchläuft die Methode das gesamte Array von Objekten, und jedes Element im Array wird als Argument person verwendet. Wie Sie sehen können, nehmen wir die Eigenschaften name und height des Arguments person und verwenden diese, um Werte für zwei <p>-Elemente in der Ausgabe zu generieren.

Vergessen Sie nicht, dass Sie JavaScript-Ausdrücke (wie das Ausführen einer map()-Methode) in JSX in geschweifte Klammern schreiben müssen.

Letztendlich gibt die Methode map() ein neues Array aus, das ein Array von Objekten in ein Array von React-Elementen (oder Komponenten) umwandelt.