Ich habe einige Daten namens Stationen, die ein Array sind, das Objekte enthält.
stations : [
{call:'station one',frequency:'000'},
{call:'station two',frequency:'001'}
]
Ich möchte eine UI-Komponente für jede Array-Position rendern. Soweit kann ich schreiben
var stationsArr = []
for (var i = 0; i < this.data.stations.length; i++) {
stationsArr.push(
<div className="station">
{this.data}
</div>
)
}
Und dann rendern
render(){
return (
{stationsArr}
)
}
Das Problem ist, dass ich alle Daten ausdrucken lasse. Ich möchte stattdessen nur einen Schlüssel wie zeigen, {this.data.call}
aber das druckt nichts.
Wie kann ich diese Daten durchlaufen und für jede Position des Arrays ein neues UI-Element zurückgeben?
javascript
reactjs
thatgibbyguy
quelle
quelle
stationsArr
anstellestations
derrender
Funktion verwenden.Antworten:
Sie können die Liste der Stationen ReactElements zuordnen.
Mit React> = 16 ist es möglich, mehrere Elemente von derselben Komponente zurückzugeben, ohne dass ein zusätzlicher HTML-Element-Wrapper erforderlich ist. Seit 16.2 gibt es eine neue Syntax <> zum Erstellen von Fragmenten. Wenn dies nicht funktioniert oder von Ihrer IDE nicht unterstützt wird, können Sie
<React.Fragment>
stattdessen verwenden. Zwischen 16.0 und 16.2 können Sie eine sehr einfache Polyfüllung für Fragmente verwenden.Versuche Folgendes
Vergiss das nicht
key
Attribut nicht!https://jsfiddle.net/69z2wepo/14377/
quelle
render
Funktion muss ein einzelnes Element zurückgeben.stations.map((station,index) => { })
funktioniert gut für michIch habe eine Antwort, die für Neulinge wie mich etwas weniger verwirrend sein könnte. Sie können nur
map
innerhalb der Komponenten-Render-Methode verwenden.quelle
key
Requisite reactjs.org/docs/lists-and-keys.html#keysthis.data
enthält vermutlich alle Daten, also müssten Sie so etwas tun:Oder Sie können
map
und Pfeilfunktionen verwenden, wenn Sie ES6 verwenden:quelle
return stations;
( codepen.io/pawelgrzybek/pen/WZEKWj )Es gibt verschiedene Möglichkeiten.
Lösung 1
Lösung 2
Natürlich gibt es auch andere Möglichkeiten.
quelle