Jeg forsøger at gøre noget som det følgende i React JSX
(hvor ObjectRow er en separat komponent):
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
Jeg er klar over og forstår, hvorfor dette ikke er gyldigt JSX
, da JSX
mapper til funktionskald. Men da jeg kommer fra skabelonland og er ny i JSX
, er jeg usikker på, hvordan jeg ville opnå ovenstående (tilføje en komponent flere gange).
Tænk på det, som om du bare kalder JavaScript-funktioner. Du kan ikke bruge en "for"-sløjfe, hvor argumenterne til et funktionskald ville gå hen:
return tbody(
for (var i = 0; i < numrows; i++) {
ObjectRow()
}
)
Se, hvordan funktionen tbody
får en for
-loop som argument, og det er selvfølgelig en syntaksfejl.
Men du kan lave et array, og så sende det ind som et argument:
var rows = [];
for (var i = 0; i < numrows; i++) {
rows.push(ObjectRow());
}
return tbody(rows);
Du kan bruge stort set den samme struktur, når du arbejder med JSX:
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>;
I øvrigt er mit JavaScript-eksempel næsten nøjagtigt det samme som det eksempel på JSX, som det omdannes til. Leg lidt rundt med Babel REPL for at få en fornemmelse af, hvordan JSX fungerer.
Jeg er ikke sikker på, om det vil fungere i din situation, men ofte er map et godt svar.
Hvis dette var din kode med for loopet:
<tbody>
for (var i=0; i < objects.length; i++) {
<ObjectRow obj={objects[i]} key={i}>
}
</tbody>
Du kunne skrive det sådan her med map:
<tbody>
{objects.map(function(object, i){
return <ObjectRow obj={object} key={i} />;
})}
</tbody>
ES6-syntaks:
<tbody>
{objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>
Jeg ved godt, at dette er en gammel tråd, men du kan måske tjekke React Templates, som gør det muligt at bruge skabeloner i jsx-stil i react, med nogle få direktiver (såsom rt-repeat).
Dit eksempel, hvis du brugte react-templates, ville være:
<tbody>
<ObjectRow rt-repeat="obj in objects"/>
</tbody>