Smyčka uvnitř React JSX

Představte si to, jako byste volali funkce JavaScriptu. Nemůžete použít smyčku for, do které by šly argumenty volání funkce:

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

Podívejte se, jak se funkci tbody předává jako argument smyčka for, což je samozřejmě syntaktická chyba.

Ale můžete vytvořit pole a to pak předat jako argument:

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

V podstatě stejnou strukturu můžete použít při práci s 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>;

Mimochodem, můj příklad JavaScriptu je téměř přesně to, na co se transformuje tento příklad JSX. Pohrajte si s Babel REPL, abyste získali představu o tom, jak JSX funguje.

Nejsem si jistý, zda to bude fungovat ve vaší situaci, ale často je mapa dobrou odpovědí.

Pokud by to byl váš kód se smyčkou for:

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

    } 
</tbody>

Mohli byste to napsat takto s map:

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

Syntaxe ES6:

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

Vím, že je to staré vlákno, ale možná byste se měli podívat na React Templates, které vám umožní používat v Reactu šablony ve stylu jsx s několika direktivami (například rt-repeat).

Tvůj příklad, pokud bys použil react-templates, by byl:

<tbody>

</tbody>