Estou tentando fazer algo parecido com o seguinte no React JSX(onde o ObjectRow é um componente separado):

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

Percebo e entendo por que isso não é válido JSX, pois JSXmapeia as chamadas de função. No entanto, vindo do modelo de terra e sendo novo JSX, não tenho certeza de como conseguiria o que foi mencionado acima (adicionando um componente várias vezes).

Pense nisso como se estivesse apenas chamando funções JavaScript. Você não pode usar um forloop no qual os argumentos para uma chamada de função iriam:

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

Veja como a função tbodyestá passando um forloop como argumento e, claro, isso é um erro de sintaxe.

Mas você pode criar uma matriz e depois passar isso como argumento:

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

Você pode usar basicamente a mesma estrutura ao trabalhar com 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>;

Aliás, meu exemplo de JavaScript é quase exatamente o que esse exemplo de JSX se transforma. Brinque com o Babel REPL para ter uma ideia de como o JSX funciona.

Não tenho certeza se isso funcionará para a sua situação, mas geralmente o mapa é uma boa resposta.

Se esse era seu código com o loop for:

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

Você poderia escrever assim com o 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>

Se você ainda não possui uma matriz para map()gostar da resposta de @ FakeRainBrigand e deseja incorporar isso, o layout de origem corresponde à saída mais próxima da resposta de @ SophieAlpert:

Com sintaxe do ES2015 (ES6) (funções de propagação e seta)

http://plnkr.co/edit/mfqFWODVy8dKQQOkIEGV?p=preview

<tbody>
  {[...Array(10)].map((x, i) =>
    <ObjectRow key={i} />
  )}
</tbody>

Re: transpiling com Babel, sua página de advertências diz que Array.fromé necessário para a propagação, mas no momento ( v5.8.23) isso não parece ser o caso ao espalhar um real Array. Eu tenho um problema de documentação aberto para esclarecer isso. Mas use por seu próprio risco ou polyfill.

Vanilla ES5

Array.apply

<tbody>
  {Array.apply(0, Array(10)).map(function (x, i) {
    return <ObjectRow key={i} />;
  })}
</tbody>

Inline IIFE

http://plnkr.co/edit/4kQjdTzd4w69g8Suu2hT?p=preview

<tbody>
  {(function (rows, i, len) {
    while (++i <= len) {
      rows.push(<ObjectRow key={i} />)
    }
    return rows;
  })([], 0, 10)}
</tbody>

Combinação de técnicas de outras respostas

Mantenha o layout de origem correspondente à saída, mas torne a peça incorporada mais compacta:

render: function () {
  var rows = [], i = 0, len = 10;
  while (++i <= len) rows.push(i);

  return (
    <tbody>
      {rows.map(function (i) {
        return <ObjectRow key={i} index={i} />;
      })}
    </tbody>
  );
}

Com sintaxe e Arraymétodos do ES2015

Com Array.prototype.fillvocê, você poderia fazer isso como uma alternativa ao uso do spread, como ilustrado acima:

<tbody>
  {Array(10).fill(1).map((el, i) =>
    <ObjectRow key={i} />
  )}
</tbody>

(Acho que você realmente pode omitir qualquer argumento fill(), mas não sou 100% nisso.) Obrigado a @FakeRainBrigand por corrigir meu erro em uma versão anterior da fill()solução (consulte as revisões).

key

Em todos os casos, o keyattr alivia um aviso com a construção do desenvolvimento, mas não está acessível no filho. Você pode passar um atributo extra se desejar que o índice esteja disponível no filho. Consulte Listas e chaves para discussão.

Simplesmente usando o método Array do mapa com sintaxe ES6:

<tbody>
  {items.map(item => <ObjectRow key={item.id} name={item.name} />)} 
</tbody>

Não esqueça a keypropriedade.

Usando mapa matriz função é maneira muito comum para fazer um loop através de uma matriz de elementos e criar componentes de acordo com eles em Reagir , esta é uma ótima maneira de fazer um loop que é muito eficiente e forma arrumada para fazer seus loops em JSX , é não a única maneira de fazê-lo, mas a maneira preferida.

Além disso, não se esqueça de ter uma chave exclusiva para cada iteração, conforme necessário. A função de mapa cria um índice exclusivo de 0, mas não é recomendado o uso do índice produzido, mas se seu valor for único ou se houver uma chave exclusiva, você poderá usá-los:

<tbody>
  {numrows.map(x=> <ObjectRow key={x.id} />)}
</tbody>

Além disso, poucas linhas do MDN se você não estiver familiarizado com a função de mapa na matriz:

map chama uma função de retorno de chamada fornecida uma vez para cada elemento em uma matriz, em ordem e constrói uma nova matriz a partir dos resultados. o retorno de chamada é chamado apenas para índices da matriz que atribuíram valores, incluindo indefinidos. Ele não é chamado para elementos ausentes da matriz (ou seja, índices que nunca foram definidos, que foram excluídos ou aos quais nunca foi atribuído um valor).

o retorno de chamada é chamado com três argumentos: o valor do elemento, o índice do elemento e o objeto Array que está sendo percorrido.

Se um parâmetro thisArg for fornecido para mapear, ele será usado como valor de retorno de chamada. Caso contrário, o valor indefinido será usado como seu valor. Esse valor finalmente observável pelo retorno de chamada é determinado de acordo com as regras usuais para determinar isso visto por uma função.

O mapa não altera a matriz na qual é chamado (embora o retorno de chamada, se chamado, possa fazê-lo).

Se você já está usando o lodash, a _.timesfunção é útil.

import React, { Component } from 'react';
import Select from './Select';
import _ from 'lodash';

export default class App extends Component {
    render() {
        return (
            <div className="container">
                <ol>
                    {_.times(3, i =>
                        <li key={i}>
                            <Select onSelect={this.onSelect}>
                                <option value="1">bacon</option>
                                <option value="2">cheez</option>
                            </Select>
                        </li>
                    )}
                </ol>
            </div>
        );
    }
}

Você também pode extrair fora do bloco de retorno:

render: function() {
    var rows = [];
    for (var i = 0; i < numrows; i++) {
        rows.push(<ObjectRow key={i}/>);
    } 

    return (<tbody>{rows}</tbody>);
}

Sei que esse é um encadeamento antigo, mas você pode fazer o checkout de React Templates , que permite usar modelos no estilo jsx em react, com algumas diretivas (como rt-repeat).

Seu exemplo, se você usasse reag-templates, seria:

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

Existem várias maneiras de fazer isso. O JSX eventualmente é compilado para JavaScript; portanto, enquanto você estiver escrevendo JavaScript válido, será bom.

Minha resposta tem como objetivo consolidar todas as formas maravilhosas já apresentadas aqui:

Se você não possui uma matriz de objeto, basta o número de linhas:

dentro do returnbloco, criando Arraye usando Array.prototype.map:

render() {
  return (
    <tbody>
      {Array(numrows).fill(null).map((value, index) => (
        <ObjectRow key={index}>
      ))}
    </tbody>
  );
}

fora do returnbloco, basta usar um loop for JavaScript normal:

render() {
  let rows = [];
  for (let i = 0; i < numrows; i++) {
    rows.push(<ObjectRow key={i}/>);
  } 
  return (
    <tbody>{rows}</tbody>
  );
}

expressão de função invocada imediatamente:

render() {
  return (
    <tbody>
      {() => {
        let rows = [];
        for (let i = 0; i < numrows; i++) {
          rows.push(<ObjectRow key={i}/>);
        }
        return rows;
      }}
    </tbody>
  );
}

Se você tiver uma matriz de objetos

dentro do returnbloco, .map()cada objeto em um <ObjectRow>componente:

render() {
  return (
    <tbody>
      {objectRows.map((row, index) => (
        <ObjectRow key={index} data={row} />
      ))}
    </tbody>
  );
}

fora do returnbloco, basta usar um loop for JavaScript normal:

render() {
  let rows = [];
  for (let i = 0; i < objectRows.length; i++) {
    rows.push(<ObjectRow key={i} data={objectRows[i]} />);
  } 
  return (
    <tbody>{rows}</tbody>
  );
}

expressão de função invocada imediatamente:

render() {
  return (
    <tbody>
      {(() => {
        const rows = [];
        for (let i = 0; i < objectRows.length; i++) {
          rows.push(<ObjectRow key={i} data={objectRows[i]} />);
        }
        return rows;
      })()}
    </tbody>
  );
}

se numrows é uma matriz, e é muito simples.

<tbody>
   {numrows.map(item => <ObjectRow />)}
</tbody>

O tipo de dados do array no React é muito melhor, o array pode fazer backup de um novo array e oferecer suporte a filtros, reduzir etc.

Existem várias respostas apontando para o uso da mapdeclaração. Aqui está um exemplo completo usando um iterador dentro do componente FeatureList para listar os componentes do recurso com base em uma estrutura de dados JSON denominada features .

const FeatureList = ({ features, onClickFeature, onClickLikes }) => (
  <div className="feature-list">
    {features.map(feature =>
      <Feature
        key={feature.id}
        {...feature}
        onClickFeature={() => onClickFeature(feature.id)}
        onClickLikes={() => onClickLikes(feature.id)}
      />
    )}
  </div>
); 

Você pode visualizar o código completo do FeatureList no GitHub. O dispositivo elétrico de recursos está listado aqui .

Para repetir várias vezes e retornar, você pode obtê-lo com a ajuda de frome map:

<tbody>
  {
    Array.from(Array(i)).map(() => <ObjectRow />)
  }
</tbody>

Onde i = number of times

Se você deseja atribuir IDs de chave exclusivos aos componentes renderizados, pode usar React.Children.toArrayconforme proposto na documentação do React

React.Children.toArray

Retorna a estrutura de dados opaca filhos como uma matriz plana com chaves atribuídas a cada filho. Útil se você deseja manipular coleções de filhos em seus métodos de renderização, especialmente se deseja reordenar ou cortar this.props.children antes de transmiti-lo.

Nota:

React.Children.toArray()altera chaves para preservar a semântica de matrizes aninhadas ao achatar listas de filhos. Ou seja, toArray prefixa cada chave na matriz retornada para que a chave de cada elemento tenha o escopo definido na matriz de entrada que a contém.

<tbody>
  {
    React.Children.toArray(
      Array.from(Array(i)).map(() => <ObjectRow />)
    )
  }
</tbody>

Se você optar por converter esse método return () interno do método render , a opção mais fácil seria usar o método map () . Mapeie sua matriz na sintaxe JSX usando a função map (), como mostrado abaixo (a sintaxe ES6 é usada ).

Componente pai interno :

<tbody>
   { objectArray.map(object => <ObjectRow key={object.id} object={object.value}>) }
</tbody>

Observe o keyatributo adicionado ao seu componente filho. Se você não forneceu um atributo-chave, poderá ver o seguinte aviso no console.

Aviso: Cada filho em uma matriz ou iterador deve ter um suporte "chave" exclusivo.

Nota: Um erro comum que as pessoas cometem é usar indexcomo chave ao iterar, usar indexo elemento como chave é um antipadrão e você pode ler mais sobre isso aqui . Em resumo, se NÃO for uma lista estática, nunca use indexcomo chave.

Agora, no componente ObjectRow , você pode acessar o objeto a partir de suas propriedades.

Componente Inside ObjectRow

const { object } = this.props

ou

const object = this.props.object

Isso deve buscar o objeto que você passou do componente pai para a variável objectno componente ObjectRow . Agora você pode cuspir os valores nesse objeto de acordo com o seu propósito.

Referências :

método map () em Javascript

Script ECMA 6 ou ES6

digamos que temos uma variedade de itens em seu estado:

[{name: "item1", id: 1}, {name: "item2", id: 2}, {name: "item3", id: 3}]

<tbody>
    {this.state.items.map((item) => {
        <ObjectRow key={item.id} name={item.name} />
    })} 
</tbody>

Uma possibilidade do ES2015 / Babel está usando uma função de gerador para criar uma matriz de JSX:

function* jsxLoop(times, callback)
{
    for(var i = 0; i < times; ++i)
        yield callback(i);
}

...

<tbody>
    {[...jsxLoop(numrows, i =>
        <ObjectRow key={i}/>
    )]}
</tbody>

... Ou você também pode preparar uma matriz de objetos e mapeá-la para uma função para obter a saída desejada. Eu prefiro isso, porque me ajuda a manter as boas práticas de codificação sem lógica dentro do retorno da renderização.

render() {
const mapItem = [];
for(let i =0;i<item.length;i++) 
  mapItem.push(i);
const singleItem => (item, index) {
 // item the single item in the array 
 // the index of the item in the array
 // can implement any logic here
 return (
  <ObjectRow/>
)

}
  return(
   <tbody>{mapItem.map(singleItem)}</tbody>
  )
}

Basta usar .map()para percorrer sua coleção e retornar <ObjectRow>itens com acessórios de cada iteração.

Assumindo que objectshá uma matriz em algum lugar ...

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

ES2015 Array.from com a função de mapa + tecla

Se você não tem nada, .map()pode usar Array.from()com a mapfunção para repetir elementos:

<tbody>
  {Array.from({ length: 5 }, (value, key) => <ObjectRow key={key} />)}
</tbody>

Eu uso isso:

gridItems = this.state.applications.map(app =>
          <ApplicationItem key={app.Id} app={app } />
);

PS: nunca esqueça a chave ou você terá muitos avisos!

Eu tendem a favorecer uma abordagem em que a lógica de programação acontece fora do valor de retorno de render . Isso ajuda a manter fácil o que realmente é renderizado.

Então eu provavelmente faria algo como:

import _ from 'lodash';

...

const TableBody = ({ objects }) => {
  const objectRows = objects.map(obj => <ObjectRow object={obj} />);      

  return <tbody>{objectRows}</tbody>;
} 

É certo que essa é uma quantidade tão pequena de código que, se for embutida, pode funcionar bem.

é claro que você pode resolver com um .map, conforme sugerido pela outra resposta. Se você já usa o babel, pode pensar em usar jsx-control-statement. Eles exigem um pouco de configuração, mas acho que vale a pena em termos de legibilidade (especialmente para desenvolvedores que não reagem). Se você usa um linter, também há instruções eslint-plugin-jsx-control-instructions

Seu código JSX será compilado em código JavaScript puro. Todas as tags serão substituídas por ReactElementobjetos. Em JavaScript, você não pode chamar uma função várias vezes para coletar suas variáveis ​​retornadas.

É ilegal, a única maneira é usar uma matriz para armazenar as variáveis ​​retornadas pela função.

Ou você pode usar o Array.prototype.mapque está disponível desde o JavaScript ES5 para lidar com essa situação.

Talvez possamos escrever outro compilador para recriar uma nova sintaxe JSX para implementar uma função de repetição, como a do Angularng-repeat .

Isso pode ser feito de várias maneiras.

1. Como sugerido acima, antes de returnarmazenar todos os elementos na matriz

2. Loop dentro return

   Método 1

    let container =[];
       let arr = [1,2,3] //can be anything array, object 
   
       arr.forEach((val,index)=>{
         container.push(<div key={index}>
                        val
                        </div>)
           /** 
           * 1. All loop generated elements require a key 
           * 2. only one parent element can be placed in Array
           * e.g. container.push(<div key={index}>
                                       val
                                 </div>
                                 <div>
                                 this will throw error
                                 </div>  
                               )
           **/   
       });
       return (
         <div>
            <div>any things goes here</div>
            <div>{container}</div>
         </div>
       )

   Método 2

      return(
        <div>
        <div>any things goes here</div>
        <div>
           {(()=>{
             let container =[];
             let arr = [1,2,3] //can be anything array, object 
             arr.forEach((val,index)=>{
               container.push(<div key={index}>
                              val
                              </div>)
                            });
                       return container;     
           })()}
   
        </div>
     </div>
   )

Aqui está uma solução simples para isso.

var Object_rows=[];
for (var i=0; i < numrows; i++) {
    Object_rows.push(<ObjectRow/>)
} 
<tbody>
  {Object_rows}
</tbody>

Nenhum mapeamento e código complexo são necessários. Você só precisa enviar as linhas para a matriz e retornar os valores para renderizá-la.

Como você está escrevendo a sintaxe Javascript no código JSX, é necessário agrupar seu Javascript entre chaves.

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

Aqui está um exemplo do React doc: Expressões JavaScript como Filhos

function Item(props) {
  return <li>{props.message}</li>;
}

function TodoList() {
  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  return (
    <ul>
      {todos.map((message) => <Item key={message} message={message} />)}
    </ul>
  );
}

como seu caso, sugiro escrever assim:

function render() {
  return (
    <tbody>
      {numrows.map((roe, index) => <ObjectRow key={index} />)}
    </tbody>
  );
}

Observe que a chave é muito importante, porque o React usa a chave para diferenciar os dados na matriz.

Eu uso assim

<tbody>
  { numrows ? (
     numrows.map(obj => { return <ObjectRow /> }) 
    ) : null
  }
</tbody>

Você pode fazer algo como:

let foo = [1,undefined,3]
{ foo.map(e => !!e ? <Object /> : null )}

Ótima pergunta.

O que faço quando quero adicionar um certo número de componentes é usar uma função auxiliar.

Defina uma função que retorne JSX:

const myExample = () => {
    let myArray = []
    for(let i = 0; i<5;i++) {
        myArray.push(<MyComponent/>)
    }
    return myArray
}

//... in JSX

<tbody>
    {myExample()}
</tbody>

Você também pode usar uma função de auto-chamada:

return <tbody>
           {(() => {
              let row = []
              for (var i = 0; i < numrows; i++) {
                  row.push(<ObjectRow key={i} />)
              }
              return row

           })()}
        </tbody>