Im heutigen Teil der Übersetzung des React-Schulungskurses werden wir über die Verwendung der Standard-Array-Methode map () sprechen, um die dynamische Bildung von JSX-Markups zu organisieren, die Sätze von Elementen desselben Typs beschreiben.
→
Teil 1: Kursübersicht, Gründe für die Beliebtheit von React, ReactDOM und JSX→
Teil 2: Funktionskomponenten→
Teil 3: Komponentendateien, Projektstruktur→
Teil 4: übergeordnete und untergeordnete Komponenten→
Teil 5: Beginn der Arbeit an einer TODO-Anwendung, Grundlagen des Stylings→
Teil 6: Über einige Funktionen des Kurses, JSX und JavaScript→
Teil 7: Inline-Stile→
Teil 8: Fortsetzung der Arbeit an der TODO-Anwendung, Vertrautheit mit den Eigenschaften von Komponenten→
Teil 9: Komponenteneigenschaften→
Teil 10: Workshop zum Arbeiten mit Komponenteneigenschaften und Styling→
Teil 11: Dynamische Markup-Generierung und Map-Arrays-Methode→
Teil 12: Workshop, dritte Phase der Arbeit an einer TODO-Anwendung→
Teil 13: Klassenbasierte Komponenten→
Teil 14: Workshop zu klassenbasierten Komponenten, Komponentenstatus→
Teil 15: Komponentengesundheitsworkshops→
Teil 16: Die vierte Phase der Arbeit an einer TODO-Anwendung, die Ereignisbehandlung→
Teil 17: Fünfte Phase der Arbeit an einer TODO-Anwendung, Änderung des Status von Komponenten→
Teil 18: Die sechste Phase der Arbeit an einer TODO-Anwendung→
Teil 19: Methoden des KomponentenlebenszyklusTeil 20: Die erste Lektion in bedingtem Rendern→
Teil 21: Zweite Lektion und Workshop zum bedingten Rendern→
Teil 22: Die siebte Phase der Arbeit an einer TODO-Anwendung, bei der Daten aus externen Quellen heruntergeladen werden→
Teil 23: Erste Lektion zum Arbeiten mit Formularen→
Teil 24: Lektion der zweiten Form→
Teil 25: Workshop zum Arbeiten mit Formularen→
Teil 26: Anwendungsarchitektur, Container- / Komponentenmuster→
Teil 27: KursprojektLektion 21. Dynamische Markup-Generierung und Map-Arrays-Methode
→
OriginalWir werden die Arbeit von dem Moment an fortsetzen, in dem wir die vorherige praktische Aufgabe erledigt haben. Denken Sie daran, dass der Code der Datei
App.js aussah:
import React from "react" import Joke from "./Joke" function App() { return ( <div> <Joke punchLine="It's hard to explain puns to kleptomaniacs because they always take things literally." /> <Joke question="What's the best thing about Switzerland?" punchLine="I don't know, but the flag is a big plus!" /> <Joke question="Did you hear about the mathematician who's afraid of negative numbers?" punchLine="He'll stop at nothing to avoid them!" /> <Joke question="Hear about the new restaurant called Karma?" punchLine="There's no menu: You get what you deserve." /> <Joke question="Did you hear about the actor who fell through the floorboards?" punchLine="He was just going through a stage." /> <Joke question="Did you hear about the claustrophobic astronaut?" punchLine="He just needed a little space." /> </div> ) } export default App
Die
App Komponente zeigt eine Reihe von
Joke . So sieht die Anwendungsseite in dieser Arbeitsphase aus.
BewerbungsseiteDie
question und
punchLine Eigenschaften werden an einige dieser Komponenten und nur an
punchLine Komponenten
punchLine . Die Werte für diese Eigenschaften werden jetzt im Instanziierungscode der Witzkomponente im Klartext festgelegt. In der Realität wird der Großteil der Daten, die auf den Seiten von React-Anwendungen angezeigt werden, aufgrund von HTTP-Anforderungen an bestimmte APIs in die Anwendung eingegeben. Diese APIs werden von Servern unterstützt, die Informationen aus Datenbanken entnehmen, in Form von JSON-Code formatieren und diesen Code an Client-Teile von Anwendungen senden. Wir haben noch keine solche Stufe erreicht, um API-Anforderungen zu erfüllen. Daher verwenden wir jetzt als Datenquelle eine Datei mit Daten, die durch Parsen der JSON-Antwort des Servers abgerufen werden können. Es handelt sich nämlich um eine Datei "
jokesData.js "mit folgendem Inhalt:
const jokesData = [ { id: 1, punchLine: "It's hard to explain puns to kleptomaniacs because they always take things literally." }, { id: 2, question: "What's the best thing about Switzerland?", punchLine: "I don't know, but the flag is a big plus!" }, { id: 3, question: "Did you hear about the mathematician who's afraid of negative numbers?", punchLine: "He'll stop at nothing to avoid them!" }, { id: 4, question: "Hear about the new restaurant called Karma?", punchLine: "There's no menu: You get what you deserve." }, { id: 5, question: "Did you hear about the actor who fell through the floorboards?", punchLine: "He was just going through a stage." }, { id: 6, question: "Did you hear about the claustrophobic astronaut?", punchLine: "He just needed a little space." } ] export default jokesData
Diese Datei befindet sich im
src Verzeichnis unseres Projekts.
Neue Datei im src-OrdnerTatsächlich enthält es eine Reihe von Objekten. Ein ähnliches Array kann durch Parsen der von einer bestimmten API empfangenen JSON-Daten erhalten werden. Wir exportieren aus dieser Datei ein Array von
jokesData . Bei Bedarf können wir diese Datei in die Komponente importieren, in der sie benötigt wird, und uns vorstellen, dass wir nicht mit den aus der Datei entnommenen Daten arbeiten, sondern mit dem, was uns eine API zurückgegeben hat.
Nachdem wir nun ein Array von Quelldaten haben, wollen wir uns überlegen, wie diese Daten in eine Reihe von Instanzen von React-Komponenten umgewandelt werden können.
Viele Entwickler sagen, dass sie dank der Beherrschung von React mehr über JavaScript gelernt haben. Der Grund dafür ist, dass Aktionen, die denen ähneln, über die wir in anderen Frameworks wie Angular und Vue sprechen werden, mit speziellen Mitteln ausgeführt werden. In React erfolgt dies mit normalem JavaScript.
Insbesondere planen wir, einige Standardmethoden für Arrays zu verwenden, bei denen es sich um Funktionen höherer Ordnung handelt. Diese Methoden können als Argumente Funktionen akzeptieren, die von Programmierern beschrieben werden. Diese Funktionen bestimmen, was ein Aufruf der einen oder anderen Standardmethode mit den Elementen des Arrays bewirkt.
Angenommen, wir haben ein numerisches Array:
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Wir können dieses Array mit der Standard-Array-Methode
map() und ihm eine bestimmte Funktion übergeben, die die Konvertierungsreihenfolge der Elemente dieses Arrays festlegt. In unserem Fall werden dieser Funktion nacheinander die Zahlen aus diesem Array übergeben. Eine Funktion kann mit ihnen alles tun. Danach geht das, was sie zurückgibt, in ein neues Array, in ein Element, dessen Index dem Index des verarbeiteten Elements entspricht. Wenn wir ein neues Array bilden müssen, dessen Elemente Elemente des ursprünglichen Arrays sind, multipliziert mit 2, sieht es folgendermaßen aus:
const doubled = nums.map(function(num) { return num * 2 })
Überprüfen Sie die Funktion dieses Codes:
console.log(doubled)
Wenn Sie zuvor noch keine
Array-Methoden wie
map() ,
filter() ,
reduce() und andere kennengelernt haben, wird empfohlen, diese zu behandeln.
Hier verwenden wir die
map() -Methode, um automatisch eine Liste von Komponenteninstanzen zu generieren.
Kehren wir zu unserem Beispiel zurück. Importieren Sie die Datei
App.js in die Datei
App.js Es wird so gemacht:
import jokesData from "./jokesData"
Danach können wir im Programmcode mit dem Array
jokesData . Wir werden nämlich die
map() -Methode verwenden. So sieht das "Leerzeichen" dieser Methode aus.
jokesData.map(joke => { })
Beachten Sie, dass wir hier die Pfeilfunktion an die
map() -Methode übergeben. In unserem Fall können wir so den Code kompakter gestalten. Da die Funktion nur einen Parameter (
joke )
joke , können wir, wenn sie deklariert ist, auf Klammern verzichten.
Von der an die
map() -Methode übergebenen Funktion möchten wir eine neue Instanz der
Joke Komponente zurückgeben, an die die
question und
punchLine Eigenschaften des
punchLine Array-Elements
punchLine . So könnte es aussehen:
jokesData.map(joke => { return ( <Joke question={joke.question} punchLine={joke.punchLine} /> ) })
Dieser Code kann gekürzt werden, wenn zwei Fakten berücksichtigt werden. Erstens gibt
return nur ein Element zurück, sodass Sie dieses Element unmittelbar nach der
return einfügen können, ohne dass Klammern erforderlich sind. Zweitens enthält die Pfeilfunktion nur die Operation zum Zurückgeben eines bestimmten Werts. Wenn Sie eine solche Funktion deklarieren, können Sie daher auf das Schlüsselwort
return und auf geschweifte Klammern verzichten. Darüber hinaus erinnern wir uns, dass als Ergebnis der
map() -Methode ein neues Array gebildet wird. Dieses Array muss irgendwo gespeichert werden. All diese Überlegungen führen uns zu Folgendem:
const jokeComponents = jokesData.map(joke => <Joke question={joke.question} punchLine={joke.punchLine} />)
Die
jokeComponents Konstante enthält jetzt ein Array, von dem jedes Element eine Beschreibung einer Instanz der
Joke Komponente mit den ihr übergebenen
question und
punchLine Eigenschaften ist.
Was machen wir jetzt mit diesem Array von Komponenten? React macht es sehr bequem, mit solchen Arrays zu arbeiten. Wir sprechen nämlich über die Tatsache, dass ein solches Array in JSX-Code verwendet werden kann. So sieht der
App Dateicode jetzt aus:
import React from "react" import Joke from "./Joke" import jokesData from "./jokesData" function App() { const jokeComponents = jokesData.map(joke => <Joke question={joke.question} punchLine={joke.punchLine} />) return ( <div> {jokeComponents} </div> ) } export default App
Danach sieht die Anwendungsseite genauso aus wie zuvor. In der Browserkonsole wird jedoch die folgende Warnung angezeigt:
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `App`. See https:
Seine Bedeutung beruht auf der Tatsache, dass Array-Elemente eine eindeutige
key haben müssen. Wir werden nicht näher darauf eingehen, warum React die eindeutige
key doppelter Komponenten erwartet. Es reicht aus, die Tatsache zu berücksichtigen, dass Instanzen bei der Massenerstellung von Komponenteninstanzen, wie wir sie gerade mit der
map() -Methode durchgeführt haben, die
key . Darüber hinaus kann eine solche Eigenschaft an die Komponenteninstanz selbst und beispielsweise an das
<div> , in dem der Komponentencode enthalten ist. Dies spielt keine besondere Rolle.
Daher muss der
key ein eindeutiger Wert zugewiesen werden. In der Regel gibt es in Datenobjekten, die von der API empfangen werden, einige Bezeichner (Eigenschaften wie
id ). Die Hauptsache für uns ist ihre Einzigartigkeit. Zum Beispiel könnten wir die
key auf
joke.question - alle Texte in diesen Eigenschaften sind in unserer Anwendung eindeutig. Aber wir werden es anders machen. Denken Sie daran, wie die Objekte mit Daten aus dem Array
jokesData.js , die wir aus der Datei
jokesData.js exportiert haben. Hier ist ein Fragment davon:
const jokesData = [ { id: 1, punchLine: "It's hard to explain puns to kleptomaniacs because they always take things literally." }, { id: 2, question: "What's the best thing about Switzerland?", punchLine: "I don't know, but the flag is a big plus!" }, ... ]
Jedes Objekt hat eine
id Eigenschaft, deren Einzigartigkeit wir unabhängig voneinander beibehalten. Es sind die Werte solcher Eigenschaften, die als Werte für die
key .
Der Code zum Erstellen eines Arrays von Komponenteninstanzen in
App.js hat nun die folgende Form:
const jokeComponents = jokesData.map(joke => <Joke key={joke.id} question={joke.question} punchLine={joke.punchLine} />)
Wenn Sie diese Änderung im Code vornehmen, die Anwendungsseite im Browser aufrufen und den Inhalt der Konsole überprüfen, stellt sich heraus, dass die Benachrichtigung über die
key verschwunden ist.
Nach all den Transformationen, die wir dem Projekt unterzogen haben, hat sich das Erscheinungsbild der Anwendungsseite nicht geändert. Der Code der
App Komponente ist jedoch viel kürzer und klarer geworden, und die Daten zum Erstellen der Liste der Komponenten stammen jetzt aus einer externen Datenquelle. Auf diese Weise funktionieren echte Anwendungen.
Darüber hinaus sollte beachtet werden, dass der Kern der obigen Codemodifikation die Verwendung der Standard-Array-Methode
map() . Wir haben die Technik des Erstellens einer Liste von Instanzen der
Joke Komponente in der
App Komponente verwendet, aber nichts hindert uns bei Bedarf daran, denselben Ansatz in der
Joke Komponente zu verwenden, die basierend auf den an sie übertragenen Daten eine eigene Liste von Instanzen einer bestimmten Komponente erstellen kann.
Gleichzeitig finden Sie, wie bereits erwähnt, unter den Standardmethoden für Arrays weitere interessante Tools. Beispielsweise kann die
sort() -Methode verwendet werden, um Array-Elemente nach einem Attribut zu sortieren. Mit der
filter() -Methode können nur die Array-Elemente ausgewählt werden, die bestimmte Kriterien erfüllen. All dies gilt für die Arbeit mit Arrays, die Instanzen von Komponenten enthalten.
Wenn Sie möchten, können Sie mit diesen Methoden experimentieren. Angenommen, Sie verwenden die
filter() -Methode und entfernen aus der von der
App Komponente generierten Instanzen die Instanzen der
Joke Komponente, deren Frageeigenschaft die angegebene Länge nicht überschreitet. Oder stellen Sie sicher, dass
punchLine nur Komponenten
punchLine werden
punchLine für die sowohl die
question Eigenschaft als auch die
punchLine Eigenschaft festgelegt sind.
Zusammenfassung
Heute haben wir über die Verwendung der Standard-Array-Methode
map() zum Kompilieren von Komponentenlisten gesprochen und auch die Möglichkeiten diskutiert, die uns andere Standard-Array-Methoden bieten. Das nächste Mal erhalten Sie eine praktische Lektion zu dem heute untersuchten Material.
Liebe Leser! Wie würden Sie das Problem lösen, dass von der App-Komponente nur die Instanzen der Joke-Komponente angezeigt werden, deren Frageeigenschaft die angegebene Länge überschreitet?