Ich habe eine Komponente, die Array of String anzeigen wird. Der Code sieht so aus.
React.createClass({
render() {
<div>
this.props.data.map(t => <span>t</span>)
</div>
}
})
Es funktioniert einwandfrei. dh wenn props.data = ['tom', 'jason', 'chris'] Das gerenderte Ergebnis auf der Seite wäre tomjasonchris
Dann möchte ich alle Namen mit Komma verbinden, also ändere ich den Code in
this.props.data.map(t => <span>t</span>).join(', ')
Das gerenderte Ergebnis ist jedoch [Objekt], [Objekt], [Objekt].
Ich weiß nicht, wie ich ein Objekt interpretieren soll, um zu zu rendernden Reaktionskomponenten zu werden. Irgendein Vorschlag ?
If the array is empty and no initialValue was provided, TypeError would be thrown.
. Daher funktioniert es nicht für leere Arrays.prev
Array rekursiv verschachtelt. zB[1, 2, 3, 4]
wird[[[1,",",2],",",3],",",4]
..reduce((prev: JSX.Element, current: JSX.Element): any => [prev, (<span> </span>), current])
Sie können
reduce
mehrere Elemente eines Arrays kombinieren:Dadurch wird der Akkumulator mit null initialisiert, sodass das erste Element in ein Array eingeschlossen werden kann. Für jedes folgende Element im Array erstellen wir ein neues Array, das alle vorherigen Elemente enthält.
...-operator
Fügen Sie dazu das Trennzeichen und dann das nächste Element hinzu.Array.prototype.reduce ()
quelle
['a'].reduce((a, e) => [...a, ',', e],[])
ergibt[",", "a"]
. Das Übergeben eines Initialisierers funktioniert nur, wenn das Array leer ist. In diesem Fall wird ein TypeError zurückgegeben.Update mit React 16: Es ist jetzt möglich, Zeichenfolgen direkt zu rendern, sodass Sie Ihren Code vereinfachen können, indem Sie alle nutzlosen
<span>
Tags entfernen .quelle
Die akzeptierte Antwort gibt tatsächlich ein Array von Arrays zurück, da
prev
es sich jedes Mal um ein Array handelt. React ist intelligent genug, um dies zum Laufen zu bringen, kann jedoch in Zukunft Probleme verursachen, z. B. das Brechen des unterschiedlichen Reacts-Algorithmus, wenn Schlüssel für jedes Ergebnis der Karte vergeben werden.Mit der neuen
React.Fragment
Funktion können wir dies auf leicht verständliche Weise ohne die zugrunde liegenden Probleme tun.Mit können
React.Fragment
wir einfach das Trennzeichen,
außerhalb des zurückgegebenen HTML platzieren und React wird sich nicht beschweren.quelle
Das, was
<span>{t}</span>
Sie zurückgeben, ist ein Objekt, keine Zeichenfolge. Überprüfen Sie die Reaktionsdokumente dazu https://facebook.github.io/react/docs/jsx-in-depth.html#the-transformDurch die Verwendung
.join()
des zurückgegebenen Arrays von verbindenmap
Sie das Array von Objekten.[object Object], ...
Sie können das Komma in das Zeichen setzen,
<span></span>
damit es so gerendert wird, wie Sie es möchten.Beispiel: https://jsbin.com/xomopahalo/edit?html,js,output
quelle
Meine Variante:
quelle
Wenn ich nur ein durch Kommas getrenntes Array von Komponenten rendern möchte, finde ich das normalerweise
reduce
zu ausführlich. Eine kürzere Lösung ist in solchen Fällen{index > 0 && ', '}
rendert ein Komma, gefolgt von einem Leerzeichen vor allen Array-Elementen mit Ausnahme des ersten.Wenn Sie die zweite zu letzten Punkt und die letzte durch etwas anderes trennen wollen, sagen Sie die Zeichenfolge
' and '
, können Sie ersetzen{index > 0 && ', '}
mitquelle
Mit es6 können Sie Folgendes tun:
Und dann laufen:
quelle
Verwenden Sie ein verschachteltes Array, um "," draußen zu halten.
Optimieren Sie es, indem Sie die Daten im Array speichern und das letzte Element ändern, anstatt ständig zu überprüfen, ob es das letzte Element ist.
quelle
Das hat bei mir funktioniert:
quelle
Wie von Pith erwähnt , können Sie in React 16 Zeichenfolgen direkt verwenden, sodass das Umschließen der Zeichenfolgen in span-Tags nicht mehr erforderlich ist. Aufbauend auf Maartens Antwort können Sie die Operation mit einer ternären if-Anweisung für die length-Eigenschaft des Arrays ausführen, wenn Sie auch sofort eine benutzerdefinierte Nachricht bearbeiten möchten (und vermeiden möchten, einen Fehler in ein leeres Array zu werfen). Das könnte ungefähr so aussehen:
quelle
Dies sollte ein flaches Array zurückgeben. Behandeln Sie den Fall mit einem nicht iterierbaren ersten Objekt, indem Sie ein anfängliches leeres Array bereitstellen und das nicht benötigte erste Komma aus dem Ergebnis herausfiltern
quelle
Bin ich der einzige, der denkt, dass in den Antworten hier eine Menge unnötiger Ausbreitung und Verschachtelung vor sich geht? Sicherlich prägnant, aber es lässt die Tür offen für Skalierungs- oder Reaktionsprobleme, die den Umgang mit verschachtelten Arrays / Fragmenten ändern.
Ein Array, keine Verschachtelung. Auch keine sexy Methodenverkettung, aber wenn Sie dies häufig tun, können Sie es jederzeit zum Array-Prototyp hinzufügen oder in eine Funktion einbinden, die auch einen Mapping-Rückruf benötigt, um alles auf einmal zu erledigen.
quelle
quelle