Ich versuche in React JSX
(wobei ObjectRow eine separate Komponente ist) Folgendes zu tun :
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
Ich erkenne und verstehe, warum dies nicht gültig ist JSX
, da JSX
es Funktionsaufrufen zugeordnet ist. Da JSX
ich jedoch aus dem Vorlagenland komme und neu in diesem Bereich bin, bin ich mir nicht sicher, wie ich das oben genannte erreichen würde (mehrmaliges Hinzufügen einer Komponente).
javascript
reactjs
Ben Roberts
quelle
quelle
let todos = this.props.todos.map((todo) => {return <h1>{todo.title}</h1>})
let todos = this.props.todos.map(t => <h1>{t.title}</h1>)
:)Antworten:
Stellen Sie sich vor, Sie rufen nur JavaScript-Funktionen auf. Sie können keine
for
Schleife verwenden, in die die Argumente für einen Funktionsaufruf gehen würden:Sehen Sie, wie der Funktion
tbody
einefor
Schleife als Argument übergeben wird, und das ist natürlich ein Syntaxfehler.Sie können jedoch ein Array erstellen und dieses dann als Argument übergeben:
Bei der Arbeit mit JSX können Sie grundsätzlich dieselbe Struktur verwenden:
Übrigens ist mein JavaScript-Beispiel fast genau das, in das sich dieses Beispiel von JSX verwandelt. Spielen Sie mit Babel REPL , um ein Gefühl dafür zu bekommen, wie JSX funktioniert.
quelle
map
(z. B. wenn keine Sammlung in einer Variablen gespeichert ist).key
jedem Kind ein a zuweisen. REF: facebook.github.io/react/docs/…key
Eigenschaft und auch ein Codestil, der in React-Codebasen nicht wirklich verwendet wird. Bitte betrachten Sie diese Antwort auf stackoverflow.com/questions/22876978/loop-inside-react-jsx/… als richtig.Ich bin mir nicht sicher, ob dies für Ihre Situation funktioniert, aber oft ist die Karte eine gute Antwort.
Wenn dies Ihr Code mit der for-Schleife war:
Sie könnten es so mit Karte schreiben :
ES6-Syntax:
quelle
<tbody>{objects.map((o, i) => <ObjectRow obj={o} key={i}/>}</tbody>
mit Reactify ES6-Unterstützung oder Babel.<ul> {objects.map((object:string,i:number)=>{ return <li>{object}</li> })} </ul>
mit TypeScriptfor..in
this.props.order.map((k)=><ObjectRow key={k} {...this.props.items[k]} />)
Wenn Sie noch kein Array haben,
map()
das die Antwort von @ FakeRainBrigand mag, und dies einbinden möchten, damit das Quelllayout der Ausgabe entspricht, die näher an der Antwort von @ SophieAlpert liegt:Mit ES2015 (ES6) Syntax (Spread- und Pfeilfunktionen)
http://plnkr.co/edit/mfqFWODVy8dKQQOkIEGV?p=preview
Betreff: Transpilieren mit Babel, seine Vorbehaltsseite besagt, dass
Array.from
dies für die Verbreitung erforderlich ist, aber derzeit (v5.8.23
) scheint dies beim Verbreiten eines tatsächlichen nicht der Fall zu seinArray
. Ich habe ein Dokumentationsproblem offen, um dies zu klären. Die Verwendung erfolgt jedoch auf eigenes Risiko oder durch Polyfill.Vanille ES5
Array.apply
Inline IIFE
http://plnkr.co/edit/4kQjdTzd4w69g8Suu2hT?p=preview
Kombination von Techniken aus anderen Antworten
Behalten Sie das Quelllayout bei, das der Ausgabe entspricht, aber machen Sie den Inline-Teil kompakter:
Mit ES2015 Syntax &
Array
MethodenMit können
Array.prototype.fill
Sie dies als Alternative zur Verwendung von Spread wie oben dargestellt tun:(Ich denke, Sie könnten tatsächlich jedes Argument weglassen
fill()
, aber ich bin nicht zu 100% damit einverstanden.) Vielen Dank an @FakeRainBrigand für die Korrektur meines Fehlers in einer früheren Version derfill()
Lösung (siehe Überarbeitungen).key
In allen Fällen
key
verringert der attr eine Warnung beim Build der Entwicklung, ist jedoch für das Kind nicht zugänglich. Sie können ein zusätzliches Attribut übergeben, wenn der Index im untergeordneten Element verfügbar sein soll. Siehe Listen und Schlüssel zur Diskussion.quelle
yield
? Das Verschieben von Elementen in ein Zwischenarray ist etwas hässlich, wenn wir Generatoren haben. Arbeiten Sie?[...Array(x)].map(() => <El />))
Version, die ich für die eleganteste halte und warum ich sie vorgestellt habe. Betreff: Die zweite Frage, das ist ein großartiger Punkt. Es scheint nichts an JSX zu geben, was dies ausschließt, daher hängt es davon ab, was React oder ein anderer Konsument von transformiertem JSX mit den untergeordneten Argumenten macht, was ich nicht sagen kann, ohne auf die Quelle zu schauen. Wissen Sie? Es ist eine faszinierende Frage.fill()
. Ich erinnere mich jetzt, dass der Grund, warum ich gezögert habe, eine Frage ist, wie die Optionalität von Parametern in der ES-Spezifikation angegeben ist (muss dies irgendwann prüfen). Das Komma ist nur eine Möglichkeit, ein Array-Element zu entfernen - in diesem Fall das erste. Sie können dies tun, wenn die Indizes von 1..Länge des Arrays stammen sollen, das Sie verbreiten, und nicht von 0..Länge-1 des gespreizten Arrays (weil elidierte Elemente nur zur Länge des Arrays beitragen und nicht '). keine entsprechende Eigenschaft haben).Verwenden Sie einfach die map Array- Methode mit ES6-Syntax:
Vergessen Sie nicht die
key
Eigenschaft.quelle
Mit Array Kartenfunktion Schleife durch eine sehr gängige Methode ist Array von Elementen und schaffen Komponenten nach ihnen in React , ist dies eine gute Möglichkeit , um eine Schleife zu tun , was recht effizient und ordentlich Weg, um Ihre Schleifen zu tun JSX , es ist nicht die einzig Weg, es zu tun, aber der bevorzugte Weg.
Vergessen Sie auch nicht, für jede Iteration nach Bedarf einen eindeutigen Schlüssel zu haben. Die Kartenfunktion erstellt einen eindeutigen Index aus 0, es wird jedoch nicht empfohlen, den erstellten Index zu verwenden. Wenn Ihr Wert jedoch eindeutig ist oder ein eindeutiger Schlüssel vorhanden ist, können Sie diese verwenden:
Außerdem einige Zeilen aus MDN, wenn Sie mit der Kartenfunktion auf Array nicht vertraut sind:
quelle
Array#map
ist nicht asynchron!Wenn Sie bereits lodash verwenden, ist die
_.times
Funktion praktisch.quelle
Sie können auch außerhalb des Rückgabeblocks extrahieren:
quelle
Ich weiß, dass dies ein alter Thread ist, aber vielleicht möchten Sie React Templates auschecken auschecken, mit dem Sie Vorlagen in jsx-Stil mit einigen Anweisungen (z. B. rt-repeat) als Reaktion verwenden können.
Ihr Beispiel wäre, wenn Sie Reaktionsvorlagen verwenden würden:
quelle
Es gibt mehrere Möglichkeiten, dies zu tun. JSX wird schließlich zu JavaScript kompiliert. Solange Sie gültiges JavaScript schreiben, sind Sie gut.
Meine Antwort zielt darauf ab, all die wunderbaren Möglichkeiten zu konsolidieren, die hier bereits vorgestellt wurden:
Wenn Sie kein Array von Objekten haben, geben Sie einfach die Anzahl der Zeilen an:
innerhalb des
return
Blocks erstellenArray
und verwendenArray.prototype.map
:return
Verwenden Sie außerhalb des Blocks einfach eine normale JavaScript-for-Schleife:sofort aufgerufener Funktionsausdruck:
Wenn Sie ein Array von Objekten haben
Innerhalb des
return
Blocks.map()
jedes Objekt einer<ObjectRow>
Komponente:return
Verwenden Sie außerhalb des Blocks einfach eine normale JavaScript-for-Schleife:sofort aufgerufener Funktionsausdruck:
quelle
Wenn numrows ein Array ist und es sehr einfach ist.
Der Array-Datentyp in React ist sehr viel besser, das Array kann ein neues Array unterstützen und Filter, Reduzieren usw. unterstützen.
quelle
Es gibt mehrere Antworten, die auf die Verwendung der
map
Anweisung hinweisen . Hier ist ein vollständiges Beispiel für die Verwendung eines Iterators in der FeatureList- Komponente zum Auflisten von Feature- Komponenten basierend auf einer JSON-Datenstruktur namens Features .Sie können den vollständigen FeatureList-Code auf GitHub anzeigen . Das Feature-Fixture ist hier aufgelistet .
quelle
Um mehrmals zu schleifen und zurückzukehren, können Sie dies mit Hilfe von
from
und erreichenmap
:wo
i = number of times
Wenn Sie den gerenderten Komponenten eindeutige Schlüssel-IDs zuweisen möchten, können Sie diese
React.Children.toArray
wie in der React-Dokumentation vorgeschlagen verwendenReact.Children.toArray
Gibt die undurchsichtige Datenstruktur der Kinder als flaches Array mit den jedem Kind zugewiesenen Schlüsseln zurück. Nützlich, wenn Sie Sammlungen von untergeordneten Elementen in Ihren Rendermethoden bearbeiten möchten, insbesondere, wenn Sie this.props.children neu anordnen oder in Scheiben schneiden möchten, bevor Sie es weitergeben.
quelle
Wenn Sie sich für die Konvertierung dieser Methode return () der Rendermethode entscheiden , ist die Verwendung der Methode map () die einfachste Option . Ordnen Sie Ihr Array mit der Funktion map () der JSX-Syntax zu (siehe unten) ( ES6-Syntax wird verwendet ).
Innerhalb der übergeordneten Komponente :
Bitte beachten Sie das
key
Attribut, das Ihrer untergeordneten Komponente hinzugefügt wurde. Wenn Sie kein Schlüsselattribut angegeben haben, wird auf Ihrer Konsole die folgende Warnung angezeigt.Hinweis: Ein häufiger Fehler besteht darin,
index
beim Iterieren als Schlüssel zu verwenden. Die Verwendungindex
des Elements als Schlüssel ist ein Anti-Pattern. Weitere Informationen hierzu finden Sie hier . Kurz gesagt, wenn es sich NICHT um eine statische Liste handelt, verwenden Sie sie niemalsindex
als Schlüssel.Jetzt bei der ObjectRow Komponente über ihre Eigenschaften auf das Objekt zugreifen.
Innerhalb der ObjectRow-Komponente
const { object } = this.props
oder
const object = this.props.object
Dadurch sollten Sie das Objekt abrufen, das Sie von der übergeordneten Komponente an die Variable
object
in der ObjectRow- Komponente übergeben haben. Jetzt können Sie die Werte in diesem Objekt entsprechend Ihrem Zweck ausspucken.Verweise :
map () -Methode in Javascript
ECMA Script 6 oder ES6
quelle
Nehmen wir an, wir haben eine Reihe von Artikeln in Ihrem Bundesstaat:
quelle
Eine ES2015 / Babel-Möglichkeit verwendet eine Generatorfunktion, um ein Array von JSX zu erstellen:
quelle
... oder Sie können auch ein Array von Objekten vorbereiten und einer Funktion zuordnen, um die gewünschte Ausgabe zu erhalten. Ich bevorzuge dies, weil es mir hilft, die bewährte Codierungspraxis ohne Logik bei der Rückgabe von Render beizubehalten.
quelle
Verwenden Sie einfach,
.map()
um Ihre Sammlung zu durchlaufen und<ObjectRow>
Gegenstände mit Requisiten aus jeder Iteration zurückzugeben.Angenommen,
objects
irgendwo ist ein Array ...quelle
ES2015 Array.from mit der Kartenfunktion + Taste
Wenn Sie nichts zu tun haben, können
.map()
SieArray.from()
mit dermap
Funktion Elemente wiederholen:quelle
Ich benutze das:
PS: Vergiss niemals den Schlüssel, sonst wirst du viele Warnungen haben!
quelle
.Id
Eigenschaft haben, wieitems.map( (item, index) => <Foo key={index}>{item}</Foo>
Ich tendiere dazu, einen Ansatz zu bevorzugen, bei dem die Programmierlogik außerhalb des Rückgabewerts von erfolgt
render
. Dies hilft dabei, das, was tatsächlich gemacht wird, leicht zu groken.Also würde ich wahrscheinlich so etwas machen wie:
Zugegeben, dies ist eine so kleine Menge an Code, dass das Inlining möglicherweise gut funktioniert.
quelle
import { map } from 'lodash'
dass Sie nicht alle Lodash-Funktionen importieren, wenn Sie sie jedoch nicht benötigen.map()
, sondern nur Arrays. Das habe ich gesagt, Lodash ist gut, um ein Objekt zu durchlaufen.objects
wie in einer Liste von Dingen meinen Fehler.Sie können natürlich mit einer .map lösen, wie in der anderen Antwort vorgeschlagen. Wenn Sie babel bereits verwenden, können Sie über die Verwendung von jsx-control-Anweisungen nachdenken. Sie erfordern ein wenig Einstellung, aber ich denke, es lohnt sich in Bezug auf die Lesbarkeit (insbesondere für nicht reagierende Entwickler). Wenn Sie einen Linter verwenden, gibt es auch eslint-plugin-jsx-control-Anweisungen
quelle
Ihr JSX-Code wird in reinen JavaScript-Code kompiliert, alle Tags werden durch
ReactElement
Objekte ersetzt. In JavaScript können Sie eine Funktion nicht mehrmals aufrufen, um die zurückgegebenen Variablen zu erfassen.Es ist illegal, die einzige Möglichkeit besteht darin, ein Array zum Speichern der von der Funktion zurückgegebenen Variablen zu verwenden.
Oder Sie können verwenden,
Array.prototype.map
was seit JavaScript ES5 verfügbar ist , um diese Situation zu behandeln.Vielleicht können wir einen anderen Compiler schreiben, um eine neue JSX-Syntax neu zu erstellen und eine Wiederholungsfunktion wie die von Angular
ng-repeat
zu implementieren .quelle
Dies kann auf verschiedene Arten erfolgen.
return
alle Elemente im Array speichernSchleife hinein
return
Methode 1
Methode 2
quelle
Hier ist eine einfache Lösung dafür.
Keine Zuordnung und kein komplexer Code erforderlich. Sie müssen nur die Zeilen in das Array verschieben und die Werte zurückgeben, um es zu rendern.
quelle
Da Sie Javascript-Syntax in JSX-Code schreiben, müssen Sie Ihr Javascript in geschweifte Klammern setzen.
quelle
Hier ist ein Beispiel aus React doc: JavaScript-Ausdrücke als untergeordnete Elemente
Als Ihren Fall schlage ich vor, wie folgt zu schreiben:
Bitte beachten Sie, dass der Schlüssel sehr wichtig ist, da React use Key verwendet, um Daten im Array zu unterscheiden.
quelle
Ich benutze es gerne
quelle
Sie können so etwas tun wie:
quelle
Gute Frage.
Wenn ich eine bestimmte Anzahl von Komponenten hinzufügen möchte, verwende ich eine Hilfsfunktion.
Definieren Sie eine Funktion, die JSX zurückgibt:
quelle
Sie können auch eine selbstaufrufende Funktion verwenden:
quelle