In diesem Artikel erfahren Sie, wie eine Anordnung in React gerendert wird und welche bewährten Verfahren beim Rendern verschiedener Elemente innerhalb von Komponenten anzuwenden sind.
Einer der Vorteile der Verwendung einer modernen Websprache wie JavaScript ist, dass Sie die Erzeugung von HTML schnell automatisieren können.
Wenn Sie so etwas wie eine Schleife gegen eine Anordnung oder ein Objekt verwenden, müssen Sie das HTML pro Element nur einmal schreiben. Besser noch, alle zukünftigen Bearbeitungen müssen nur einmal angewendet werden.
Um mehrere JSX-Elemente in React zu rendern, können Sie eine Anordnung mit der .map()
-Methode durchlaufen und ein einzelnes Element zurückgeben.
Unten durchlaufen Sie die reptiles
-Anordnung und geben ein li
-Element für jedes Element in der Anordnung zurück. Sie können diese Methode verwenden, wenn Sie ein einzelnes Element für jedes Element in der Anordnung anzeigen möchten:
function ReptileListItems() {
const reptiles = ["alligator", "snake", "lizard"];
return reptiles.map((reptile) => <li>{reptile}</li>);
}
Die Ausgabe sieht in etwa folgendermaßen aus:
Output- alligator
- snake
- lizard
Im nächsten Beispiel prüfen Sie, warum Sie einen eindeutigen key
zu einer Liste von Elementen hinzufügen möchten, die von einer Anordnung gerendert werden.
In diesem Beispiel durchlaufen Sie eine Anordnung und erstellen wie im vorherigen Beispiel eine Reihe von Listenelementkomponenten.
Zu Beginn aktualisieren Sie den Code, um die <ol>
-Komponente zum Speichern der <li>
-Elemente zu verwenden. Die <ol>
-Komponente erstellt eine geordnete Liste der Elemente:
function ReptileList() {
const reptiles = ["alligator", "snake", "lizard"];
return (
<ol>
{reptiles.map((reptile) => (
<li>{reptile}</li>
))}
</ol>
);
}
Wenn Sie jedoch auf die Konsole schauen, sehen Sie eine Warnung, dass jedes untergeordnete Element in einer Anordnung oder einem Iterator einen eindeutigen Schlüssel haben sollte.
Die Warnung erscheint, da Sie beim Versuch, eine Sammlung innerhalb einer Komponente zu rendern, einen key
hinzufügen müssen.
In React wird ein eindeutiger key
verwendet, um zu bestimmen, welche der Komponenten in einer Sammlung neu gerendert werden müssen. Durch das Hinzufügen eines eindeutigen keys
wird verhindert, dass React bei jeder Aktualisierung die gesamte Komponente neu rendern muss.
In diesem Schritt rendern Sie mehrere Elemente in einer Komponente und fügen einen eindeutigen key
hinzu. Aktualisieren Sie den Code so, dass er einen key
für die Listenelemente beinhaltet, um die Warnung zu beheben:
function ReptileList() {
const reptiles = ['alligator', 'snake', 'lizard'];
return (
<ol>
{reptiles.map(reptile => (
<li key={reptile}>{reptile}</li>
))}
</ol>
);
}
Nachdem Sie nun einen key
hinzugefügt haben, wird die Warnung nicht mehr in der Konsole angezeigt.
Im nächsten Beispiel sehen Sie, wie Sie benachbarte Elemente rendern können, ohne auf einen üblichen Syntaxfehler zu stoßen.
Um mehr als ein Element in einer Komponente zu rendern, müssen Sie einen Wrapper um diese Elemente hinzufügen.
In diesem Beispiel geben Sie zunächst eine Liste von Elementen zurück, ohne eine Schleife durch eine Anordnung zu bilden:
function ReptileListItems() {
return (
<li>alligator</li>
<li>snake</li>
<li>lizard</li>
);
}
Dadurch erhalten Sie einen schweren Fehler in der Konsole:
Um diesen Fehler zu beheben, müssen Sie den Block von li
-Elementen in einem Wrapper einpacken. Für eine Liste können Sie diese in ein ol
oder ul
packen:
function ReptileListItems() {
return (
<ol>
<li>alligator</li>
<li>snake</li>
<li>lizard</li>
</ol>
);
}
Die angrenzenden <li>
-Elemente werden jetzt in ein umschließendes Tag <ol>
eingehüllt,und Sie werden keinen Fehler mehr sehen.
Im nächsten Abschnitt werden Sie eine Liste mit Hilfe einer Fragment
-Komponente in einem Wrapper rendern.
React.fragment
Vor React v16.2 können Sie einen Block von Komponenten in ein <div>
-Element einpacken. Dies würde zu einer Anwendung voller divs
führen, die oft als “div soup” bezeichnet wird.
Um dieses Problem zu beheben, hat React eine neue Komponente veröffentlicht, die als Fragment
-Komponente bekannt ist:
Wenn Sie eine Liste innerhalb eines umschließenden Tags rendern müssen, aber vermeiden möchten, dass Sie eine div
benutzen, können Sie stattdessen React.Fragment
verwenden:
function ReptileListItems() {
return (
<React.Fragment>
<li>alligator</li>
<li>snake</li>
<li>lizard</li>
</React.Fragment>
);
}
Der gerenderte Code enthält nur die li
-Elemente, und die React.Fragment
-Komponente wird nicht im Code angezeigt.
Beachten Sie auch, dass mit React.fragment
keine Notwendigkeit besteht, einen Schlüssel hinzuzufügen.
Sie werden feststellen, dass das Schreiben von React.fragment
mühsamer als das Hinzufügen einer <div>
ist. Glücklicherweise hat das React-Team eine kürzere Syntax entwickelt, um diese Komponente zu repräsentieren. Sie können <> </>
anstelle von <React.Fragment></React.Fragment>
verwenden:
function ReptileListItems() {
return (
<>
<li>alligator</li>
<li>snake</li>
<li>lizard</li>
</>
);
}
In diesem Artikel haben Sie verschiedene Beispiele für das Rendern von Anordnungen in einer React-Anwendung untersucht.
Wenn Sie ein Element innerhalb einer anderen Komponente rendern, sollten Sie einen eindeutigen key
verwenden und Ihre Elemente innerhalb eines Wrappers umfassen.
Je nach Anwendungsfall können Sie einfache Listen erstellen, die in eine Fragment
-Komponente gepackt werden und keinen Schlüssel benötigen.
Um mehr über bewährte Praktiken in React zu erfahren, folgen Sie der vollständigen Reihe Wie man in React.js codiert auf DigitalOcean.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.