Bucle dentro de React JSX

Estoy tratando de hacer algo como lo siguiente en React JSX (donde ObjectRow es un componente separado):

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

Me doy cuenta y entiendo por qué esto no es válido JSX, ya que JSX mapea a las llamadas de función. Sin embargo, viniendo de la tierra de las plantillas y siendo nuevo en JSX, no estoy seguro de cómo podría lograr lo anterior (añadir un componente varias veces).

Solución

Piensa en ello como si estuvieras llamando a funciones de JavaScript. No puedes usar un bucle for donde irían los argumentos de una llamada a una función:

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

Mira como a la función tbody se le está pasando un bucle for como argumento, y por supuesto eso es un error de sintaxis.

Pero puedes hacer un array, y luego pasarlo como argumento:

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

Puedes utilizar básicamente la misma estructura cuando trabajes con 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>;

Por cierto, mi ejemplo de JavaScript es casi exactamente en lo que se transforma ese ejemplo de JSX. Juega con Babel REPL para tener una idea de cómo funciona JSX.

Comentarios (18)

No estoy seguro de que esto funcione en tu situación, pero a menudo mapa es una buena respuesta.

Si este fuera tu código con el bucle for:

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

    } 
</tbody>

Podrías escribirlo así con mapa:

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

Sintaxis ES6:

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

Sé que este es un hilo viejo, pero es posible que desee comprobar React Templates, que le permite utilizar plantillas de estilo jsx en react, con algunas directivas (como rt-repeat).

Tu ejemplo, si usaras react-templates, sería:

<tbody>

</tbody>
Comentarios (1)