Ich versuche, eine jQuery-Komponente in React.js zu konvertieren, und eines der Dinge, mit denen ich Schwierigkeiten habe, ist das Rendern von n Elementen basierend auf einer for-Schleife.
Ich verstehe, dass dies nicht möglich oder empfohlen ist und dass die Verwendung eines Arrays im Modell durchaus sinnvoll ist map
. Das ist in Ordnung, aber was ist, wenn Sie kein Array haben? Stattdessen haben Sie einen numerischen Wert, der einer bestimmten Anzahl von zu rendernden Elementen entspricht. Was sollten Sie dann tun?
Hier ist mein Beispiel: Ich möchte einem Element eine beliebige Anzahl von Span-Tags voranstellen, basierend auf seiner Hierarchieebene. Auf Ebene 3 möchte ich also 3 Span-Tags vor dem Textelement.
In Javascript:
for (var i = 0; i < level; i++) {
$el.append('<span class="indent"></span>');
}
$el.append('Some text value');
Ich kann das oder etwas Ähnliches nicht verstehen, um in einer JSX React.js-Komponente zu arbeiten. Stattdessen musste ich Folgendes tun, zuerst ein temporäres Array mit der richtigen Länge erstellen und dann das Array in einer Schleife durchlaufen.
React.js
render: function() {
var tmp = [];
for (var i = 0; i < this.props.level; i++) {
tmp.push(i);
}
var indents = tmp.map(function (i) {
return (
<span className='indent'></span>
);
});
return (
...
{indents}
"Some text value"
...
);
}
Sicherlich kann dies nicht der beste oder einzige Weg sein, dies zu erreichen? Was vermisse ich?
quelle
Antworten:
Aktualisiert: Ab React> 0.16
Die Rendermethode muss nicht unbedingt ein einzelnes Element zurückgeben. Ein Array kann auch zurückgegeben werden.
ODER
Hier finden Sie Informationen zu JSX-Kindern
ALT:
Sie können stattdessen eine Schleife verwenden
Sie können auch .map und ausgefallene es6 verwenden
Außerdem müssen Sie den Rückgabewert in einen Container einschließen. Ich habe im obigen Beispiel div verwendet
Wie die Dokumente hier sagen
quelle
Hier ist ein funktionaleres Beispiel mit einigen ES6-Funktionen:
quelle
import React from "react"
undexport default Articles
for loop
Array (oder Objekt) in ein Map-fähiges Array (oder Objekt) konvertiert , um n Elemente in einer React-Komponente zu rendern, ohne ein Array von Elementen zu haben. Ihre Lösung ignoriert diese Tatsache vollständig und geht davon aus, dass eine Reihe von Artikeln von Requisiten übergeben werden.Ich benutze,
Object.keys(chars).map(...)
um in Render zu schleifenquelle
chars && ...
und.bind(this)
am Ende meiner Funktion. Ich bin gespannt, warum nurObject...
(so weiter und so fort) nicht funktioniert hat. Ich wurde immer undefinierter.Array.from()
Nimmt ein iterierbares Objekt zum Konvertieren in ein Array und eine optionale Zuordnungsfunktion. Sie können ein Objekt mit einer.length
Eigenschaft wie folgt erstellen :quelle
Ich denke, dies ist der einfachste Weg, um js zu reagieren
quelle