Lus binnen React JSX

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();
}
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++) {

    } 
</tbody>

Je zou het zo kunnen schrijven met map:

<tbody>
    {objects.map(function(object, i){
        return ;
    })}
</tbody>

ES6 syntaxis:

<tbody>
    {objects.map((object, 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>

</tbody>