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).
1126
3
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:Mira como a la función
tbody
se le está pasando un buclefor
como argumento, y por supuesto eso es un error de sintaxis.Pero puedes hacer un array, y luego pasarlo como argumento:
Puedes utilizar básicamente la misma estructura cuando trabajes con JSX:
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.
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:
Podrías escribirlo así con mapa:
Sintaxis ES6:
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: