Я знаю, что это старая ветка, но вы можете проверить React Templates, которая позволяет вы используете шаблоны типа jsx в реакции с несколькими директивами (такими как rt-repeat).

Ваш пример, если бы вы использовали ответные шаблоны, был бы:

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

Вот пример из документа React: Выражения JavaScript как дети

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

Как ваш случай, я предлагаю написать так:

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

Обратите внимание, что ключ очень важен, потому что React использует ключ для различения данных в массиве.

Я использую это как

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

Вы, конечно, можете решить с помощью .map, как подсказывает другой ответ. Если вы уже используете babel, вы можете подумать об использовании jsx-control-Statement Они требуют небольшой настройки, но я думаю, что это стоит с точки зрения читабельности (особенно для не реагирующего разработчика). Если вы используете линтер, есть также eslint-plugin-jsx-control-Statement

Я использую это:

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

PS: никогда не забывайте ключ, иначе у вас будет много предупреждений!

Есть несколько способов сделать это. JSX в конечном итоге компилируется в JavaScript, поэтому, пока вы пишете правильный JavaScript, вы будете в порядке.

Мой ответ нацелен на объединение всех чудесных способов, уже представленных здесь:

Если у вас нет массива объектов, просто количество строк:

В блоке return создайте Array и используйте Array.prototype.map:

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

Вне блока return просто используйте обычный цикл for для JavaScript:

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

Сразу вызывается функция выражения:

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

Если у вас есть массив объектов

В блоке return .map() каждый объект компонента <ObjectRow>:

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

Вне блока return просто используйте обычный цикл for для JavaScript:

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

Сразу вызывается функция выражения:

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

Не уверен, что это будет работать в вашей ситуации, но часто Карта - хороший ответ.

Если это был ваш код с циклом for:

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

Вы можете написать это так с map :

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

Синтаксис ES6:

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

Вот простое решение для этого.

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

Нет необходимости в отображении и сложном коде. Вам просто нужно поместить строки в массив и вернуть значения для его визуализации.

Возможность ES2015 / Babel - использовать функцию генератора для создания массива JSX:

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

...

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

Просто используйте метод map Array с синтаксисом ES6:

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

Не забудьте свойство key.

ES2015 Array.from с функцией карты + клавиша

Если у вас нет ничего для .map(), вы можете использовать Array.from() с функцией map для повторения элементов:

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

Я склоняюсь к подходу, где логика программирования происходит за пределами возвращаемого значения render. Это помогает сохранить то, что на самом деле легко сделать.

Так что я бы, наверное, сделал что-то вроде:

import _ from 'lodash';

...

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

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

По общему признанию, это такой небольшой объем кода, что его вставка может работать нормально.

Просто используйте .map(), чтобы пройтись по своей коллекции и вернуть <ObjectRow> элементы с реквизитом из каждой итерации.

Предполагая, что objects является массивом где-то ...

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

Вы также можете извлечь вне блока возврата:

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

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

Ваш JSX-код будет скомпилирован в чистый код JavaScript, любые теги будут заменены ReactElement объектами. В JavaScript вы не можете вызывать функцию несколько раз для сбора возвращаемых переменных.

Это недопустимо, единственный способ - использовать массив для хранения возвращаемых функцией переменных.

Или вы можете использовать Array.prototype.map который доступен начиная с JavaScript ES5 чтобы справиться с этой ситуацией.

Возможно, мы сможем написать другой компилятор для воссоздания нового синтаксиса JSX для реализации функции повтора, например, Angular's ng-repeat.

Есть несколько ответов, указывающих на использование оператора map. Вот полный пример использования итератора в компоненте FeatureList для перечисления компонентов Feature на основе структуры данных JSON под названием 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>
); 

Вы можете просмотреть полный код FeatureList на GitHub. , Список функций здесь.

Скажем, у нас есть массив элементов в вашем состоянии:

[{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>