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

Поэтому я, вероятно, сделаю что-то вроде:

import _ from 'lodash';

...

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

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

По общему признанию, это такой небольшой код, работа хорошо.

Использование функции отображения массива - очень распространенный способ прокрутки массива элементов и создания компонентов по ним в React, это отличный способ сделать цикл, который довольно эффективен и удобен для выполнения ваших циклов в JSX. не единственный способ сделать это, но предпочтительный путь. Кроме того, не забудьте указать уникальный ключ для каждой итерации по мере необходимости. Функция Map создает уникальный индекс из 0, но не рекомендуется использовать индекс, но если ваше значение уникально или есть уникальный ключ, вы можете использовать их:

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

Также несколько строк из MDN if вы не знакомы с функцией отображения на массиве:

map вызывает предоставленную функцию обратного вызова один раз для каждого элемента массива в порядке и создает новый массив из результатов. callback вызывается только для индексов массива, которым присвоены значения, в том числе неопределенные. Он не называется отсутствующими элементами массива (то есть индексы, которые никогда не были установлены, которые были удалены или которым никогда не назначено значение).

обратный вызов вызывается с тремя аргументами: значение элемента, индекс элемента и объект Array, пройденный.

Если для отображения предусмотрен параметр thisArg, он будет использоваться в качестве обратного вызова этого значения. В противном случае значение undefined будет использоваться как его значение. Это значение, в конечном счете наблюдаемое обратным вызовом, определяется в соответствии с обычными правилами для определения этого вида функции.

map не мутирует массив, на который он вызывается (хотя callback, если он вызван, может делать так).

Вот простое решение.

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

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

Если вы решите преобразовать этот метод return () в метод рендеринга, самым простым вариантом будет использование метода map (). Сопоставьте свой массив в синтаксисе JSX с помощью функции map (), как показано ниже ( используется синтаксис ES6 ).

Внутренний родительский компонент:

<tbody> { objectArray.map((object, index) => <ObjectRow key={index} object={object}>) } </tbody>

Обратите внимание, что атрибут key добавлен в ваш дочерний компонент. Если вы не указали ключевой атрибут, вы можете увидеть следующее предупреждение на своей консоли.

Предупреждение. Каждый дочерний элемент в массиве или итераторе должен иметь уникальную «ключевую» опору.

---

Теперь в компоненте ObjectRow вы можете получить доступ к объекту из его свойств.

Внутри компонента ObjectRow

const { object } = this.props

или

const object = this.props.object

Это должно привести вам объект, который вы передали от родительского компонента к переменной object в компоненте ObjectRow. Теперь вы можете выплеснуть значения в этом объекте в соответствии с вашей целью.

---

Ссылки:

метод map () в Javascript

ECMA Script 6 или ES6

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

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

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

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

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

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

Функция 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>

ES2015 Array.from с функцией map + key

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

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

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

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

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

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

Я знаю, что это старый поток, но вы можете проверить http://wix.github.io/react-templates/ , что позволяет использовать шаблоны jsx-стиля в реакции , с несколькими директивами (например, rt-repeat).

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

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

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

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

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

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

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

Чтобы циклически повторяться и возвращаться, вы можете достичь этого с помощью from и map :

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

, где i = number of times

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

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

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

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

, если numrows - это массив, и это очень просто.

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

Тип данных Array в React очень хорош, массив может возвращать новый массив и поддерживать фильтр, уменьшать и т. д.

Если вы уже используете lodash, функция _.times удобна.

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

Вы можете сделать что-то вроде:

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

Вы также можете использовать функцию самозапуска:

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

           })()}
        </tbody>

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

Если это был ваш код с циклом 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>

Я использую его как

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

Вот пример из React doc: https://facebook.github.io/react/docs/jsx-in-depth.html#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>
  );
}

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

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

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

Если у вас еще нет массива на map(), например, ответа @ FakeRainBrigand, и хотите вставить его таким образом, чтобы исходный макет соответствовал выходному сигналу ближе, чем ответ @ SophieAlpert:

С ES2015 ( ES6) [расширенные и стрелочные функции]

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

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

Re: указывает, что Array.from требуется для распространения, но в настоящее время (v5.8.23), который, похоже, не имеет места при распространении фактического Array. У меня есть проблема документации , чтобы выяснить это. Но используйте на свой страх и риск или полипол.

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>

Комбинирование методов из других ответов

Хранить исходный макет, соответствующий выходному , но сделайте внутреннюю часть более компактной:

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

С синтаксисом ES2015 & amp; Array методы

С помощью Array.prototype.fill вы могли бы сделать это как альтернативу использованию спреда, как показано выше:

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

(я думаю, вы действительно могли бы опустить любой аргумент fill(), но я не на это 100%.) Благодаря @FakeRainBrigand для исправления моей ошибки в более ранней версии решения fill() (см. ревизии).

key

Во всех случаях key attr устраняет предупреждение с помощью сборки разработки, но недоступно для ребенка. Вы можете передать дополнительный attr, если хотите, чтобы индекс был доступен в дочернем элементе. См. Списки и ключи для обсуждения.