(где ObjectRow является отдельным компонентом): JSX Я понимаю, и понять, почему это недопустимо

<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 Но вы можете создать массив, а затем передать его в качестве аргумента:

Вы можете использовать в основном ту же структуру при работе с JSX:

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

Кстати, мой пример JavaScript почти такой же, как этот пример 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>;

Babel REPL , чтобы понять, как работает JSX. Не уверен, сработает ли это в вашей ситуации, но часто

map — хороший ответ. Если бы это был ваш код с циклом for:

Вы могли бы написать это так с

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

map синтаксис ES6: :

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

Если у вас еще нет массива для

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

типа @ Ответ FakeRainBrigand, и хочу вставить его так, чтобы макет источника соответствовал выводу, более близкому к ответу @ SophieAlpert: map() С синтаксисом ES2015 (ES6) (функции разворота и стрелок)

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

Re: трансплантация с Babel, его

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

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

Inline IIFE

Array.apply

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

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>

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

С синтаксисом ES2015 & amp ;

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 scope (протестировано в Graph API v2.9):

2 — это число цифр, до которого мы хотим округлить это число. Array.prototype.fill, но я не 100 % по этому поводу.) Спасибо @FakeRainBrigand за исправление моей ошибки в более ранней версии решения

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

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

key

Списки и ключи key для обсуждения. Просто используйте метод map

с синтаксисом ES6: Не забывайте свойство Массив . Функция

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

— это очень распространенный способ циклически проходить через key элементов и создавать компоненты в соответствии с ними в

массивов Я добавляю этот ответ, потому что я его здесь не вижу. , это отличный способ сделать цикл, который является довольно эффективным и аккуратным способом выполнения ваших циклов в JSX Массив , это реагировать предпочтительный способ. Кроме того, не забудьте, что уникальный ключ не Вот пример использования функции eval : создает уникальный индекс из 0, но не рекомендуется использовать созданный индекс, но если ваше значение уникально или если есть уникальный ключ, вы можете использовать them:

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

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

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

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

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

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

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

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

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

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

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

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

Существует несколько ответов, указывающих на использование компонента

FeatureList map. Вот полный пример использования итератора в для перечисления компонента компоненты, основанные на структуре данных 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. Список функций приведен здесь , скажем, у нас есть массив элементов в вашем состоянии: Глядя на вывод

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

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

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

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

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

в блоке return, создание Array и использование вне блока Array.prototype.map:

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

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

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

block,

в блоке return каждый объект в .map() component: <ObjectRow> … Или вы также можете подготовить массив объектов и сопоставить его с функцией, чтобы получить желаемый результат. Я предпочитаю это, потому что это помогает мне поддерживать хорошую практику кодирования без логики в возвращении рендера.

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

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

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

Если вы решите преобразовать это внутри

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

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


для содержимого каждого файла. :

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

Обратите внимание на key Теперь в компоненте

ObjectRow


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

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

const { object } = this.props

или

const object = this.props.object

Метод map () в Javascript ECMA Script 6 или ES6 object в Внутри Компонент ObjectRow Возможность ES2015 / Babel использует функцию генератора для создания массива JSX:


Ссылки:

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

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

Просто используйте

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

...

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

для циклического просмотра вашей коллекции и возврата

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

Предполагая, что

является массивом где-то … .map() вы, конечно, можете решить с помощью .map, как предложено другим ответом р. Если вы уже используете babel, вы можете подумать об использовании <ObjectRow> предметов с подпорками от каждой итерации.

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

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

Или вы можете использовать ReactElement, который доступен

начиная с JavaScript ES5

, чтобы справиться с этой ситуацией. Array.prototype.map Может быть, мы можем написать другой компилятор для воссоздания нового синтаксиса JSX для реализации функции повтора, как ES2015 Array.from

Angular с функциональной клавишей карты Если у вас есть ng-repeat Глядя на вывод

ничего нельзя использовать с для повторения элементов:

Я предпочитаю подход, когда логика программирования происходит за пределами возвращаемого значения .map(). Это помогает сохранить то, что на самом деле легко сделать. Array.from() Так что я бы, вероятно, сделал что-то вроде: mapFn По общему признанию, это такой небольшой объем кода, что его вставка может работать нормально.

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

Это можно сделать несколькими способами. render Как было предложено выше, перед

сохранением всех элементов в массиве

import _ from 'lodash';

...

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

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

Цикл внутри

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

  1. Без отображения и сложного код требуется. Вам просто нужно поместить строки в массив и вернуть значения для его визуализации. return Я использую его как
  2. Поскольку вы пишете синтаксис Javascript внутри JSX-кода, вам нужно заключить Javascript в фигурные скобки. 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>
    )
    

Отличный вопрос. from и map:

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

Как указывают @squint и @mekdev, вы получаете лучшая производительность, сначала создав функцию вне цикла, а затем связав результаты внутри цикла. i = number of times

, который обычно является автоинкрементным числом

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

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

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

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

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

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

https://facebook.github.io/react/docs/jsx-in-depth.html # javascript-expressions-as-children

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

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

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

//... in JSX

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

CODE COPIED FROM LINK.

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

           })()}
        </tbody>

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

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

javascript — jQuery Получить выбранный вариант из выпадающего списка — переполнение стека https://facebook.github.io/react/docs/jsx-in-depth.html # выражения javascript-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>
  );
}

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

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

javascript — jQuery Получить выбранный вариант из выпадающего списка — Переполнение стека