Nie wiem, czy to zadziała w twojej sytuacji, ale często Mapa jest dobrą odpowiedzią.

Jeśli to był twój kod z pętlą for:

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

Możesz to napisać tak z mapą:

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

ES6 składnia:

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

Jeśli nie masz jeszcze tablicy map(), takiej jak odpowiedź @ FakeRainBrigand, i chcesz ją wstawić, aby układ źródłowy odpowiadał wyjściu bliżej niż odpowiedź @ SophieAlpert:

Ze składnią ES2015 (ES6) (funkcje spread i arrow)

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

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

Re: transpiling z Babel, jego Strona mówi, że Array.from jest wymagany do spreadowania, ale obecnie (v5.8.23) nie wydaje się ma to miejsce w przypadku rozprzestrzenienia rzeczywistego Array. Mam problem z dokumentacją otwarty, aby to wyjaśnić. Ale używaj na własne ryzyko lub polyfill.

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>

Połączenie technik z innych odpowiedzi

Zachowaj układ źródłowy odpowiadający wyjściu, ale zwiększ zwartość części inlined:

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

Z Składnia ES2015 & Array metody

Z Array.prototype.fill możesz to zrobić jako alternatywę dla użycia spreadu, jak pokazano powyżej:

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

(myślę, że faktycznie można pominąć wszelkie argumenty fill(), ale nie jestem w 100% na to.) Podziękowania dla @ FakeRainBrigand za poprawienie mojego błędu we wcześniejszej wersji rozwiązania fill() (patrz poprawki).

key

We wszystkich przypadkach key attr łagodzi Ostrzeżenie za pomocą kompilacji rozwojowej, ale nie jest dostępny u dziecka. Ty może przekazać dodatkowe attr, jeśli chcesz, aby indeks był dostępny w dziecku. Zobacz listy i klucze do dyskusji.

Po prostu użyj mapy Array metoda ze składnią ES6:

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

Nie zapomnij o własności key.

Używanie funkcji Array map jest bardzo powszechnym sposobem pętli poprzez Array elementów i tworzenia komponentów zgodnie z nimi w React, jest to świetny sposób na zrobienie pętli, który jest dość wydajny i uporządkowany sposób na zrobienie pętli w JSX, nie jest to jedyny sposób na zrobienie tego, ale preferowany sposób .

Nie zapomnij również o unikalnym kluczu dla każdej iteracji zgodnie z wymaganiami. Funkcja Map tworzy unikalny Indeks od 0, ale nie jest zalecane użycie indeksu, ale jeśli twoja wartość jest unikalna lub jeśli istnieje unikalny klucz, możesz ich użyć:

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

Również kilka linii z MDN Jeśli nie znasz funkcji map na tablicy:

Map wywołuje dostarczoną funkcję zwrotną raz dla każdego elementu w array, in order, and konstruuje nową tablicę z wyników. callback jest wywoływane tylko dla indeksów tablicy, które mają przypisane wartości, łącznie z undefined. Nie wymaga brakujących elementów na array (czyli indeksy, które nigdy nie zostały ustawione, które zostały usunięte lub które nigdy nie zostały przypisane wartości).

Wywołanie zwrotne jest wywoływane trzema argumentami: wartością elementu, indeks elementu i przemieszczany obiekt Array.

Jeśli parametr thisArg zostanie dostarczony do map, zostanie użyty jako oddzwonienie to ta wartość. W przeciwnym razie wartość undefined zostanie użyta jako jego wartość. Wartość ta ostatecznie obserwowalna przez wywołanie zwrotne jest ustalane zgodnie ze zwykłymi zasadami ustalania tego przez funkcję.

Mapa nie mutuje tablicy, na której jest wywoływana (chociaż wywołanie zwrotne, jeśli wywołane, może to zrobić).

Jeśli już używasz lodash,_.times funkcja jest przydatna.

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

Możesz również wyodrębnić poza blokiem powrotu:

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

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

Wiem, że to jest stary wątek, ale może chcesz sprawdzić http://wix.github.io/react-templates/, który pozwala używać szablonów w stylu jsx w reaccie, z kilkoma dyrektywami (np. RT-repeat).

Twój przykład, jeśli użyłeś react-templates, to:

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

Jeśli numrows jest tablicą i jest to bardzo proste.

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

Array typ danych w Reaccie jest bardzo lepszy, array może poprzeć nową tablicę i wspierać filtrowanie, zmniejszanie itd.

Istnieje kilka odpowiedzi wskazujących na użycie map. Poniżej znajduje się pełny przykład użycia iteratora wewnątrz komponentu FeatureList do listy komponentów Feature opartych na strukturze danych JSON o nazwie Feature.

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

Możesz wyświetlić pełny kod FeatureList na Githubie. Opis funkcji znajduje się tutaj.

Powiedzmy, że mamy tablicę elementów w Twoim stanie:

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

Jeśli zdecydujesz się przekonwertować to wewnątrz return () z render , najprostszą opcją będzie użycie metody map () . Mapuj swoją tablicę do składni JSX za pomocą funkcji map (), jak pokazano poniżej (używana jest składnia ES6 ).

Wewnątrz komponentu nadrzędnego :

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

Zwróć uwagę na atrybut key dodany do komponentu potomnego. Jeśli nie podałeś atrybutu key, na konsoli pojawi się następujące ostrzeżenie.

Ostrzeżenie: każde dziecko w tablicy lub iteratorze powinno mieć unikalny rekwizyt "kluczowy".

Teraz w komponencie ObjectRow możesz uzyskać dostęp do obiektu z jego właściwości.

Inside objectrow component

const { object } = this.props

Lub

const object = this.props.object

To powinno pobrać obiekt, który przekazałeś z komponentu nadrzędnego do zmiennej objectw komponencie ObjectRow. Teraz możesz wypluć wartości w tym obiekcie zgodnie z Twoim cel.

Bibliografia:

Metoda Map () w Javascript

Skrypt ECMA 6 lub ES6

Używam tego:

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

PD: nigdy nie zapominaj klucza, bo będziesz miał wiele ostrzeżeń !

...Możesz też przygotować tablicę obiektów i zmapować ją do funkcji, aby uzyskać pożądane wyniki. Wolę to, ponieważ pomaga mi to zachować dobrą praktykę kodowania bez logiki wewnątrz powrotu renderowania.

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

Po prostu użyj .map(), aby zapętlić swoją kolekcję i zwrócić {[2] } przedmioty z rekwizytami z każdej iteracji.

Zakładając, że objects jest gdzieś tablicą...

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

Możliwość ES2015 / Babel używa funkcji generatora do utworzenia tablicy JSX:

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

...

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

Można oczywiście rozwiązać za pomocąMapa zgodnie z sugestią drugiej odpowiedzi. Jeśli już używasz babel, możesz pomyśleć o użyciu JSX-control-statements Wymagają trochę ustawienia, ale myślę, że warto pod względem czytelności(szczególnie dla programistów nie reagujących). Jeśli używasz lintera, istnieje również eslint-plugin-jsx-control-statements

Twój kod JSX skompiluje się do czystego kodu JavaScript, wszelkie znaczniki zostaną zastąpione przez obiekty ReactElement. W języku JavaScript nie można wywoływać funkcji wiele razy w celu zebrania zwracanych zmiennych.

Jest to nielegalne, jedynym sposobem jest użycie tablicy do przechowywania zwracanych zmiennych funkcji.

Lub możesz użyć Array.prototype.map który jest dostępny od JavaScript ES5 do obsługi tej sytuacji.

Może możemy napisać inny kompilator, aby odtworzyć nową składnię JSX do zaimplementuj funkcję powtarzania, tak jak Angular ' S ng-repeat.

ES2015 Array.z {[6] } z funkcją map + klawisz

Jeśli nie masz nic do .map() możesz użyć Array.from() z mapFn do powtarzania elementów:

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

Preferuję podejście, w którym logika programowania dzieje się poza wartością zwracaną render. Pomaga to zachować to, co jest faktycznie renderowane łatwe do grok.

Więc pewnie zrobiłbym coś takiego:

import _ from 'lodash';

...

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

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

Trzeba przyznać, że jest to tak mała ilość kodu, że wlinkowanie może działać dobrze.

Można to zrobić na wiele sposobów.

1. jak sugerowano powyżej, przed return Przechowuj wszystkie elementy w tablicy

2. Loop inside return

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

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

Aby zapętlić kilka razy i powrócić, możesz to osiągnąć za pomocą from oraz map:

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

Gdzie i = number of times

Używam go jak

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

Można to zrobić na wiele sposobów. JSX ostatecznie zostanie skompilowany do JavaScript, więc tak długo, jak piszesz poprawny JavaScript, będziesz dobry.

Moja odpowiedź ma na celu utrwalenie wszystkich wspaniałych sposobów już tu przedstawionych:

Jeśli nie masz tablicy obiektu, po prostu liczba wierszy:

Wewnątrz bloku return, tworząc Array i używając Array.prototype.map:

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

Poza blokiem return, po prostu użyj zwykłego JavaScript for-loop:

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

Natychmiast wywołane wyrażenie funkcji:

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

Jeśli masz tablicę obiektów

Wewnątrz bloku return, .map() każdy obiekt do <ObjectRow> składowej:

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

Poza blokiem return, po prostu użyj zwykłej pętli JavaScript for-loop:

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

Natychmiast wywołane wyrażenie funkcji:

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

Ponieważ piszesz składnię Javascript w kodzie JSX, musisz owinąć Javascript w klamry.

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

Oto proste rozwiązanie.

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

Nie jest wymagane mapowanie i złożony kod.Wystarczy wypchnąć wiersze do tablicy i zwrócić wartości, aby je renderować.

Świetne pytanie.

To, co robię, gdy chcę dodać określoną liczbę komponentów, to używać funkcji pomocniczej.

Zdefiniuj funkcję zwracającą JSX:

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

//... in JSX

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

Możesz również użyć funkcji samo wywołującej:

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

           })()}
        </tbody>

Możesz zrobić coś takiego:

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

Oto przykład z 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>
  );
}

W Twoim przypadku proponuję napisać tak:

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

Proszę zauważyć, że klucz jest bardzo ważny, ponieważ React używa klucza do różnicowania danych w tablicy.