I'estou tentando fazer algo como o seguinte em React JSX
(onde ObjectRow é um componente separado):
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
Eu percebo e entendo porque isto é't válido JSX
, uma vez que JSX
mapeia chamadas para funções. No entanto, vindo do terreno do template e sendo novo no JSX
, não tenho certeza de como eu conseguiria o acima (adicionando um componente várias vezes).
Pense nisso como se você estivesse apenas chamando funções JavaScript. Você não pode utilizar um laço `para' onde os argumentos para uma chamada de função iriam:
return tbody(
for (var i = 0; i < numrows; i++) {
ObjectRow()
}
)
Veja como a função tbody
está sendo passada um loop for
como argumento, e é claro que isso é um erro de sintaxe.
Mas você pode fazer um array, e depois passar isso como um argumento:
var rows = [];
for (var i = 0; i < numrows; i++) {
rows.push(ObjectRow());
}
return tbody(rows);
É possível utilizar basicamente a mesma estrutura quando se trabalha com o 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>;
A propósito, meu exemplo de JavaScript é quase exatamente no que esse exemplo de JSX se transforma. Brinque com Babel REPL para ter uma idéia de como o JSX funciona.
Não sei se isso vai funcionar para a sua situação, mas muitas vezes mapa é uma boa resposta.
Se este era o seu código com o "for loop":
<tbody>
for (var i=0; i < objects.length; i++) {
<ObjectRow obj={objects[i]} key={i}>
}
</tbody>
Você poderia escrevê-lo assim com mapa:
<tbody>
{objects.map(function(object, i){
return <ObjectRow obj={object} key={i} />;
})}
</tbody>
Sintaxe ES6:
<tbody>
{objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>
Eu sei que este é um tópico antigo, mas você pode querer fazer checkout Reagir Modelos, que permite que você use modelos no estilo jsx para reagir, com algumas diretrizes (como rt-repeat).
Seu exemplo, se você usasse modelos de reação, seria:
<tbody>
<ObjectRow rt-repeat="obj in objects"/>
</tbody>