Kilpa "React JSX" viduje

Galvokite apie tai taip, tarsi tiesiog skambintumėte "JavaScript" funkcijoms. Negalite naudoti for ciklo, į kurį patektų funkcijos iškvietimo argumentai:

return tbody(
    for (var i = 0; i < numrows; i++) {
        ObjectRow()
    } 
)

Pažiūrėkite, kaip funkcijai tbody kaip argumentas perduodamas for ciklas, ir tai, žinoma, yra sintaksės klaida.

Tačiau galite sukurti masyvą ir perduoti jį kaip argumentą:

var rows = [];
for (var i = 0; i < numrows; i++) {
    rows.push(ObjectRow());
}
return tbody(rows);

Iš esmės tokią pačią struktūrą galite naudoti ir dirbdami su 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();
}
return <tbody>{rows}</tbody>;

Beje, mano "JavaScript" pavyzdys beveik tiksliai atitinka tai, į ką transformuojasi šis JSX pavyzdys. Žaiskite su Babel REPL, kad pajustumėte, kaip veikia JSX.

Nesu tikras, ar tai tiks jūsų atveju, bet dažnai žemėlapis yra geras atsakymas.

Jei tai būtų jūsų kodas su for ciklu:

<tbody>
    for (var i=0; i < objects.length; i++) {

    } 
</tbody>

Jūs galėtumėte jį parašyti taip: žemėlapis:

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

ES6 sintaksė:

<tbody>
    {objects.map((object, i) => )}
</tbody>

Žinau, kad tai sena gija, bet galbūt norėsite patikrinti React Templates, kuri leidžia naudoti jsx stiliaus šablonus React, su keliomis direktyvomis (pvz., rt-repeat).

Jūsų pavyzdys, jei naudotumėte react-templates, būtų toks:

<tbody>

</tbody>