Ik'probeer iets als het volgende te doen in React JSX
(waarbij ObjectRow een aparte component is):
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
Ik realiseer me en begrijp waarom dit JSX
niet geldig is, aangezien JSX
naar functie-aanroepen mapt. Echter, komend uit template land en nieuw in JSX
, ben ik niet zeker hoe ik het bovenstaande zou kunnen bereiken (een component meerdere keren toevoegen).
Zie het als het aanroepen van JavaScript functies. Je kunt geen for
lus gebruiken waar de argumenten van een functie-aanroep heen zouden gaan:
return tbody(
for (var i = 0; i < numrows; i++) {
ObjectRow()
}
)
Zie hoe de functie tbody
een for
lus als argument krijgt doorgegeven, en dat'is natuurlijk een syntaxis fout.
Maar je kunt een array maken, en dat dan als argument doorgeven:
var rows = [];
for (var i = 0; i < numrows; i++) {
rows.push(ObjectRow());
}
return tbody(rows);
Je kunt in principe dezelfde structuur gebruiken wanneer je met JSX werkt:
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>;
Overigens, mijn JavaScript voorbeeld is bijna precies waar dat voorbeeld van JSX in transformeert. Speel wat rond met Babel REPL om een gevoel te krijgen voor hoe JSX werkt.
Niet zeker of dit voor uw situatie zal werken, maar vaak is map een goed antwoord.
Als dit jouw code was met de for-lus:
<tbody>
for (var i=0; i < objects.length; i++) {
<ObjectRow obj={objects[i]} key={i}>
}
</tbody>
Je zou het zo kunnen schrijven met map:
<tbody>
{objects.map(function(object, i){
return <ObjectRow obj={object} key={i} />;
})}
</tbody>
ES6 syntaxis:
<tbody>
{objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>
Ik weet dat dit een oude thread is, maar je zou React Templates kunnen bekijken, waarmee je jsx-stijl templates in react kunt gebruiken, met een paar directives (zoals rt-repeat).
Je voorbeeld, als je react-templates zou gebruiken, zou zijn:
<tbody>
<ObjectRow rt-repeat="obj in objects"/>
</tbody>