Я пытаюсь сделать что-то вроде следующего в React JSX(где ObjectRow является отдельным компонентом):

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

Я понимаю и понимаю, почему это неверно JSX, поскольку JSXсопоставляет вызовы функций. Тем не менее, исходя из шаблона земли и будучи новичком JSX, я не уверен, как бы я достиг вышеизложенного (добавление компонента несколько раз).

Думайте об этом, как будто вы просто вызываете функции JavaScript. Вы не можете использовать forцикл, куда будут идти аргументы для вызова функции:

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

Посмотрите, как функции tbodyпередается forцикл в качестве аргумента, и, конечно, это синтаксическая ошибка.

Но вы можете создать массив, а затем передать его в качестве аргумента:

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

Вы можете использовать в основном ту же структуру при работе с 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>;

Между прочим, мой пример JavaScript почти точно то, во что превращается этот пример JSX. Поиграйте с Babel REPL, чтобы понять, как работает JSX.

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

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

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

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

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

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

С синтаксисом ES2015 (ES6) (функции разворота и стрелок)

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

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

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

Ваниль ES5

Array.apply

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

Встроенный 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>
  );
}

С синтаксисом и Arrayметодами ES2015

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

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

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

key

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

Просто с помощью метода map Array с синтаксисом ES6:

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

Не забывайте keyсобственность.

Использование функции Array map - очень распространенный способ циклически проходить по массиву элементов и создавать компоненты в соответствии с ними в React. Это отличный способ создания цикла, который является довольно эффективным и аккуратным способом выполнения ваших циклов в JSX. Это не единственный способ сделать это, но предпочтительный способ.

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

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

Кроме того, несколько строк из MDN, если вы не знакомы с функцией map в Array:

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

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

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

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

Если вы уже используете 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>
        );
    }
}

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

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

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

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

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

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

Есть несколько способов сделать это. 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>
  );
}

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

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

Тип данных массива в React намного лучше, массив может поддерживать новый массив и поддерживать фильтрацию, уменьшение и т. Д.

Есть несколько ответов, указывающих на использование этого mapутверждения. Вот полный пример использования итератора в рамках FeatureList компоненты к списку Feature компонентов на основе структуры данных JSON под названием функция .

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. Особенности приспособление перечислены здесь .

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

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

где i = number of times

Если вы хотите назначить уникальные идентификаторы ключей в визуализируемых компонентах, вы можете использовать их, React.Children.toArrayкак предложено в документации React.

React.Children.toArray

Возвращает дочернюю непрозрачную структуру данных в виде плоского массива с ключами, назначенными каждому дочернему элементу. Полезно, если вы хотите манипулировать коллекциями дочерних элементов в ваших методах рендеринга, особенно если вы хотите переупорядочить или нарезать this.props.children перед его передачей.

Замечания:

React.Children.toArray()изменяет ключи, чтобы сохранить семантику вложенных массивов при сглаживании списков дочерних элементов. То есть, toArray ставит префикс перед каждым ключом в возвращаемом массиве, так что ключ каждого элемента ограничивается входным массивом, содержащим его.

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

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

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

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

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

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

Примечание. Одна распространенная ошибка, которую делают люди, - это использование в indexкачестве ключа при итерации, использование indexэлемента в качестве ключа является анти-паттерном, и вы можете прочитать больше об этом здесь . Короче говоря, если это НЕ статический список, никогда не используйте его в indexкачестве ключа.

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

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

const { object } = this.props

или

const object = this.props.object

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

Ссылки :

метод map () в Javascript

ECMA Script 6 или ES6

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

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

Возможность 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>

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

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

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

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

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

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

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

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

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

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

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

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

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

import _ from 'lodash';

...

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

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

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

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

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

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

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

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

Это можно сделать несколькими способами.

1. Как указано выше, перед returnсохранением всех элементов в массиве

2. Петля внутри return

   Способ 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>
       )

   Способ 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>
   )

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

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

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

Поскольку вы пишете синтаксис Javascript внутри JSX-кода, вам нужно заключить Javascript в фигурные скобки.

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

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

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

Отличный вопрос

Когда я хочу добавить определенное количество компонентов, я использую вспомогательную функцию.

Определите функцию, которая возвращает JSX:

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

//... in JSX

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

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

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

           })()}
        </tbody>