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 se JSXasigna a llamadas a funciones. Sin embargo, viniendo de la plantilla y siendo nuevo en JSX, no estoy seguro de cómo lograría lo anterior (agregando un componente varias veces).

Piense en ello como si solo estuviera llamando a funciones de JavaScript. No puede usar un forbucle donde irían los argumentos de una llamada a la función:

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

Vea cómo tbodyse pasa un forbucle a la función como argumento y, por supuesto, es un error de sintaxis.

Pero puede hacer una matriz y luego pasarla como argumento:

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

Puedes usar básicamente la misma estructura cuando trabajas 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(<ObjectRow key={i} />);
}
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.

No estoy seguro si esto funcionará para su situación, pero a menudo el mapa es una buena respuesta.

Si este fue su código con el bucle for:

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

Podrías escribirlo así con el mapa :

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

Sintaxis ES6:

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

Si aún no tiene una matriz que le map()guste la respuesta de @ FakeRainBrigand, y desea alinear esto para que el diseño de origen corresponda a la salida más cercana que la respuesta de @ SophieAlpert:

Con sintaxis ES2015 (ES6) (funciones de dispersión y flecha)

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

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

Re: transpilando con Babel, su página de advertencias dice que Array.fromse requiere para la propagación, pero en la actualidad ( v5.8.23) ese no parece ser el caso cuando se difunde un real Array. Tengo un problema de documentación abierto para aclarar eso. Pero use bajo su propio riesgo o polyfill.

Vanilla ES5

Array.apply

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

IIFE en línea

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>

Combinación de técnicas de otras respuestas.

Mantenga el diseño de origen correspondiente a la salida, pero haga que la parte en línea sea más 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>
  );
}

Con sintaxis y Arraymétodos ES2015

Con Array.prototype.fillusted podría hacer esto como una alternativa al uso de propagación como se ilustra arriba:

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

(Creo que podría omitir cualquier argumento fill(), pero no estoy al 100% en eso). Gracias a @FakeRainBrigand por corregir mi error en una versión anterior de la fill()solución (ver revisiones).

key

En todos los casos, el keyatributo alivia una advertencia con la construcción de desarrollo, pero no es accesible en el niño. Puede pasar un atributo adicional si desea que el índice esté disponible en el elemento secundario. Ver Listas y claves para la discusión.

Simplemente usando el método map Array con la sintaxis ES6:

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

No te olvides de la keypropiedad.

El uso de la función de mapa Array es una forma muy común de recorrer una matriz de elementos y crear componentes de acuerdo con ellos en React , esta es una excelente manera de hacer un ciclo que es bastante eficiente y ordenada para hacer sus bucles en JSX , no es la única forma de hacerlo, pero la forma preferida.

Además, no olvide tener una clave única para cada iteración según sea necesario. La función de mapa crea un índice único desde 0 pero no se recomienda usar el índice producido, pero si su valor es único o si hay una clave única, puede usarlos:

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

Además, algunas líneas de MDN si no está familiarizado con la función de mapa en Array:

map llama a una función de devolución de llamada proporcionada una vez para cada elemento en una matriz, en orden, y construye una nueva matriz a partir de los resultados. la devolución de llamada se invoca solo para índices de la matriz que tienen valores asignados, incluidos los indefinidos. No se llama para elementos faltantes de la matriz (es decir, índices que nunca se han establecido, que se han eliminado o que nunca se les ha asignado un valor).

la devolución de llamada se invoca con tres argumentos: el valor del elemento, el índice del elemento y el objeto Array que se atraviesa.

Si se proporciona un parámetro thisArg para asignar, se utilizará como este valor de devolución de llamada. De lo contrario, el valor indefinido se utilizará como su valor. Este valor finalmente observable por la devolución de llamada se determina de acuerdo con las reglas habituales para determinar esto visto por una función.

map no muta la matriz en la que se llama (aunque la devolución de llamada, si se invoca, puede hacerlo).

Si ya está usando lodash, la _.timesfunción es ú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>
        );
    }
}

También puede extraer fuera del bloque de retorno:

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

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

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

Su ejemplo, si usó react-templates, sería:

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

Hay varias formas de hacerlo. JSX finalmente se compila en JavaScript, por lo que siempre que esté escribiendo JavaScript válido, será bueno.

Mi respuesta apunta a consolidar todas las formas maravillosas que ya se presentan aquí:

Si no tiene una matriz de objetos, simplemente el número de filas:

dentro del returnbloque, creando Arrayy usando Array.prototype.map:

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

fuera del returnbloque, simplemente use un JavaScript for-loop normal:

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

expresión de función invocada inmediatamente:

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

Si tienes una variedad de objetos

dentro del returnbloque, .map()cada objeto a un <ObjectRow>componente:

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

fuera del returnbloque, simplemente use un JavaScript for-loop normal:

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

expresión de función invocada inmediatamente:

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

if numrows es una matriz, y es muy simple.

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

El tipo de datos de matriz en React es mucho mejor, la matriz puede respaldar una nueva matriz y admite filtros, reducir, etc.

Hay varias respuestas que apuntan al uso de la mapdeclaración. Aquí hay un ejemplo completo que usa un iterador dentro del componente FeatureList para enumerar los componentes Feature basados ​​en una estructura de datos JSON llamada características .

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>
); 

Puede ver el código completo de FeatureList en GitHub. El accesorio de características se enumera aquí .

Para recorrer varias veces y regresar, puede lograrlo con la ayuda de fromy map:

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

dónde i = number of times

Si desea asignar ID de clave únicos a los componentes renderizados, puede usarlos React.Children.toArraycomo se propone en la documentación de React

React.Children.toArray

Devuelve la estructura de datos opaca de los hijos como una matriz plana con claves asignadas a cada hijo. Útil si desea manipular colecciones de elementos secundarios en sus métodos de representación, especialmente si desea reordenar o dividir this.props.children antes de pasarlo.

Nota:

React.Children.toArray()cambia las claves para preservar la semántica de las matrices anidadas al acoplar listas de elementos secundarios. Es decir, toArray coloca los prefijos de cada clave en la matriz devuelta para que la clave de cada elemento tenga un alcance en la matriz de entrada que la contiene.

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

Si se opta para convertir esto dentro de retorno () de rendir método, opción más fácil sería utilizar un mapa () método. Asigne su matriz a la sintaxis JSX usando la función map (), como se muestra a continuación ( se usa la sintaxis ES6 ).

Componente principal interno :

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

Tenga en cuenta el keyatributo agregado a su componente hijo. Si no proporcionó un atributo clave, puede ver la siguiente advertencia en su consola.

Advertencia: cada elemento secundario en una matriz o iterador debe tener un accesorio "clave" único.

Nota: Un error común que la gente comete es usar indexcomo clave al iterar, usar indexel elemento como clave es un antipatrón y puede leer más sobre esto aquí . En resumen, si NO es una lista estática, nunca la use indexcomo clave.

Ahora en el componente ObjectRow , puede acceder al objeto desde sus propiedades.

Componente interno de ObjectRow

const { object } = this.props

o

const object = this.props.object

Esto debería obtener el objeto que pasó del componente principal a la variable objecten el componente ObjectRow . Ahora puede escupir los valores en ese objeto de acuerdo con su propósito.

Referencias

método map () en Javascript

ECMA Script 6 o ES6

digamos que tenemos una variedad de artículos en su 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>

Una posibilidad de ES2015 / Babel es utilizar una función de generador para crear una 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>

... O también puede preparar una matriz de objetos y asignarla a una función para obtener la salida deseada. Prefiero esto, porque me ayuda a mantener la buena práctica de codificación sin lógica dentro del retorno del render.

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>
  )
}

Simplemente use .map()para recorrer su colección y devolver <ObjectRow>artículos con accesorios de cada iteración.

Suponiendo que objectshay una matriz en alguna parte ...

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

ES2015 Array.from con la función de mapa + tecla

Si no tiene nada .map()que pueda usar Array.from()con la mapfunción para repetir elementos:

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

Yo uso esto:

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

PD: ¡nunca olvides la clave o tendrás muchas advertencias!

Tiendo a favorecer un enfoque donde la lógica de programación ocurre fuera del valor de retorno de render. Esto ayuda a mantener lo que realmente se hace fácil de asimilar.

Entonces probablemente haría algo como:

import _ from 'lodash';

...

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

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

Es cierto que se trata de una cantidad de código tan pequeña que incluirla podría funcionar bien.

por supuesto, puede resolver con un .map como lo sugiere la otra respuesta. Si ya usa babel, podría pensar en usar jsx-control-sentencias. Requieren un poco de configuración, pero creo que vale la pena en términos de legibilidad (especialmente para desarrolladores que no reaccionan). Si usa un linter, también hay eslint-plugin-jsx-control-declaraciones

Su código JSX se compilará en código JavaScript puro, cualquier etiqueta será reemplazada por ReactElement objetos. En JavaScript, no puede llamar a una función varias veces para recopilar sus variables devueltas.

Es ilegal, la única forma es usar una matriz para almacenar las variables devueltas de la función.

O puede usar el Array.prototype.mapque está disponible desde JavaScript ES5 para manejar esta situación.

Tal vez podamos escribir otro compilador para recrear una nueva sintaxis JSX para implementar una función de repetición como la de Angularng-repeat .

Esto se puede hacer de múltiples maneras.

1. Como se sugirió anteriormente, antes de returnalmacenar todos los elementos en la matriz

2. Lazo 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>
   )

Aquí hay una solución simple para ello.

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

No se requiere mapeo ni código complejo. Solo necesita empujar las filas a la matriz y devolver los valores para representarlo.

Como está escribiendo la sintaxis de Javascript dentro del código JSX, debe envolver su Javascript en llaves.

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

Aquí hay una muestra de React doc: JavaScript Expressions as Children

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>
  );
}

según su caso, sugiero escribir así:

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

Tenga en cuenta que la clave es muy importante, porque React usa la clave para diferenciar los datos en la matriz.

Lo uso como

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

Puedes hacer algo como:

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

Gran pregunta

Lo que hago cuando quiero agregar un cierto número de componentes es usar una función auxiliar.

Defina una función que devuelva JSX:

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

//... in JSX

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

También puede usar una función de invocación automática:

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

           })()}
        </tbody>