Slinga i React JSX

Tänk på det som om du bara anropar JavaScript-funktioner. Du kan inte använda en for-slinga där argumenten till ett funktionsanrop skulle hamna:

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

Se hur funktionen tbody skickas till en for-slinga som argument, och det är naturligtvis ett syntaxfel.

Men du kan skapa en array och sedan skicka in den som ett argument:

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

Du kan använda i princip samma struktur när du arbetar 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>;

För övrigt är mitt JavaScript-exempel nästan exakt det som JSX-exemplet omvandlas till. Lek lite med Babel REPL för att få en känsla för hur JSX fungerar.

Jag är inte säker på att detta fungerar i din situation, men ofta är map ett bra svar.

Om detta var din kod med for-slingan:

<tbody>
    for (var i=0; i < objects.length; i++) {
        <ObjectRow obj={objects[i]} key={i}>
    } 
</tbody>

Du skulle kunna skriva den så här med map:

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

ES6-syntax:

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

Jag vet att det här är en gammal tråd, men du kanske vill kolla in React Templates, som låter dig använda jsx-mallar i react, med några få direktiv (t.ex. rt-repeat).

Ditt exempel, om du använde react-templates, skulle vara:

<tbody>
     <ObjectRow rt-repeat="obj in objects"/>
</tbody>