Ich versuche, so etwas wie die folgenden in React JSX
(wo ObjectRow eine separate Komponente ist) zu tun:
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
Ich erkenne und verstehe, warum dies kein gültiges JSX
ist, da JSX
auf Funktionsaufrufe abbildet. Da ich jedoch aus dem Template-Land komme und neu in JSX
bin, bin ich mir nicht sicher, wie ich das oben genannte erreichen würde (eine Komponente mehrfach hinzufügen).
Stellen Sie es sich so vor, als ob Sie JavaScript-Funktionen aufrufen würden. Sie können keine "for"-Schleife verwenden, in die die Argumente eines Funktionsaufrufs eingehen würden:
return tbody(
for (var i = 0; i < numrows; i++) {
ObjectRow()
}
)
Sehen Sie, wie der Funktion "tbody" eine "for"-Schleife als Argument übergeben wird, und das ist natürlich ein Syntaxfehler.
Aber Sie können ein Array erstellen und dieses dann als Argument übergeben:
var rows = [];
for (var i = 0; i < numrows; i++) {
rows.push(ObjectRow());
}
return tbody(rows);
Sie können im Grunde dieselbe Struktur verwenden, wenn Sie mit JSX arbeiten:
var rows = [];
for (var i = 0; i < numrows; i++) {
// note: we add a key prop here to allow react to uniquely identify each
// element in this array. see: https://reactjs.org/docs/lists-and-keys.html
rows.push(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;
Übrigens ist mein JavaScript-Beispiel fast genau das, was dieses JSX-Beispiel darstellt. Spielen Sie mit [Babel REPL] (https://babeljs.io/repl), um ein Gefühl dafür zu bekommen, wie JSX funktioniert.
Ich bin nicht sicher, ob das in Ihrer Situation funktioniert, aber oft ist map eine gute Antwort.
Wenn dies Ihr Code mit der for-Schleife war:
<tbody>
for (var i=0; i < objects.length; i++) {
<ObjectRow obj={objects[i]} key={i}>
}
</tbody>
Du könntest es so schreiben, mit map:
<tbody>
{objects.map(function(object, i){
return <ObjectRow obj={object} key={i} />;
})}
</tbody>
ES6-Syntax:
<tbody>
{objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>
Ich weiß, dies ist ein altes Thema, aber Sie möchten vielleicht Checkout React Templates, die können Sie Jsx-Stil Vorlagen in React, mit ein paar Direktiven (wie rt-repeat) verwenden.
Ihr Beispiel, wenn Sie react-templates verwenden, wäre:
<tbody>
<ObjectRow rt-repeat="obj in objects"/>
</tbody>