Próbuję zrobić coś takiego w React JSX(gdzie ObjectRow jest osobnym składnikiem):

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

Rozumiem i rozumiem, dlaczego to nie jest poprawne JSX, skoro JSXmapy do wywołań funkcji. Jednakże, pochodząc z szablonu i będąc nowym JSX, nie jestem pewien, jak bym to osiągnął (wielokrotne dodawanie komponentu).

Pomyśl o tym, jakbyś tylko wywoływał funkcje JavaScript. Nie można użyć forpętli, do której trafiłyby argumenty wywołania funkcji:

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

Zobacz, jak funkcja tbodyjest przekazywana do forpętli jako argument, i oczywiście jest to błąd składniowy.

Ale możesz utworzyć tablicę, a następnie przekazać ją jako argument:

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

Podczas pracy z JSX można używać zasadniczo tej samej struktury:

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

Nawiasem mówiąc, mój przykład JavaScript jest prawie dokładnie tym, na co przekształca się ten przykład JSX. Baw się z Babel REPL, aby przekonać się, jak działa JSX.

Nie jestem pewien, 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 napisać to tak z mapą :

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

Składnia ES6:

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

Jeśli nie masz jeszcze tablicy, która map()polubiłaby odpowiedź @ FakeRainBrigand, i chcesz to wstawić, aby układ źródłowy odpowiadał wynikowi bliżej niż odpowiedź @ SophieAlpert:

Ze składnią ES2015 (ES6) (funkcje rozkładania i strzałek)

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

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

Re: transpilacja z Babel, jego strona z zastrzeżeniami mówi, że Array.fromjest to wymagane do rozprzestrzeniania, ale obecnie ( v5.8.23) nie wydaje się tak w przypadku rozpowszechniania faktów Array. Mam problem z dokumentacją, aby to wyjaśnić. Ale używaj na własne ryzyko lub wypełniacz.

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 wynikowi, ale spraw, aby wstawiana część była bardziej zwarta:

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

Ze składnią ES2015 i Array metodami

Dzięki temu Array.prototype.fillmożesz to zrobić jako alternatywę dla spreadu, jak pokazano powyżej:

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

(Myślę, że faktycznie można pominąć każdy argument fill(), ale nie jestem w 100% tego zdania.) Dzięki @FakeRainBrigand za naprawienie mojego błędu we wcześniejszej wersji fill()rozwiązania (zobacz wersje).

key

We wszystkich przypadkach keyattr łagodzi ostrzeżenie dzięki kompilacji programistycznej, ale nie jest dostępne u dziecka. Możesz przekazać dodatkowe attr, jeśli chcesz, aby indeks był dostępny dla dziecka. Zobacz Listy i klucze do dyskusji.

Wystarczy użyć metody map Array ze składnią ES6:

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

Nie zapomnij o keynieruchomości.

Korzystanie z funkcji mapowania tablic jest bardzo powszechnym sposobem zapętlania tablicy elementów i tworzenia komponentów zgodnie z nimi w React , jest to świetny sposób na wykonanie pętli, która jest dość wydajnym i uporządkowanym sposobem wykonywania pętli w JSX , to nie jedyne sposób, aby to zrobić, ale preferowany sposób.

Nie zapomnij także o posiadaniu unikalnego klucza dla każdej iteracji zgodnie z wymaganiami. Funkcja mapy tworzy unikalny indeks od 0, ale nie jest zalecane używanie wygenerowanego 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>

Ponadto kilka wierszy z MDN, jeśli nie znasz funkcji mapy na tablicy:

map wywołuje podaną funkcję wywołania zwrotnego jeden raz dla każdego elementu w tablicy, i konstruuje nową tablicę na podstawie wyników. wywołanie zwrotne jest wywoływane tylko dla indeksów tablicy, które mają przypisane wartości, w tym niezdefiniowane. Nie jest wywoływany z powodu brakujących elementów tablicy (tj. Indeksów, które nigdy nie zostały ustawione, które zostały usunięte lub którym nigdy nie przypisano wartości).

wywołanie zwrotne jest wywoływane z trzema argumentami: wartością elementu, indeksem elementu i przemierzanym obiektem Array.

Jeśli parametr thisArg zostanie podany do mapowania, zostanie użyty jako wartość zwrotna tej wartości. W przeciwnym razie wartość niezdefiniowana zostanie wykorzystana jako jej wartość. Ta wartość ostatecznie obserwowalna przez wywołanie zwrotne jest ustalana zgodnie ze zwykłymi zasadami określania tego widzianego przez funkcję.

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

Jeśli już używasz lodash, _.timesfunkcja 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 także wyodrębnić poza blok powrotu:

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

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

Wiem, że to stary wątek, ale możesz chcieć pobrać szablony React , które pozwalają używać szablonów w stylu jsx w reakcji, z kilkoma dyrektywami (takimi jak rt-repeat).

Twój przykład, jeśli użyjesz szablonów reagowania, to:

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

Można to zrobić na wiele sposobów. JSX ostatecznie zostanie skompilowany do JavaScript, więc dopóki piszesz prawidłowy JavaScript, będziesz dobry.

Moja odpowiedź ma na celu utrwalenie wszystkich cudownych sposobów, które zostały już tutaj przedstawione:

Jeśli nie masz tablicy obiektów, po prostu liczba wierszy:

w returnbloku, tworzenie Arrayi używanie Array.prototype.map:

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

poza returnblokiem, po prostu użyj normalnej pętli for JavaScript:

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

w obrębie returnbloku .map()każdy obiekt do <ObjectRow>komponentu:

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

poza returnblokiem, po prostu użyj normalnej pętli 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>
  );
}

natychmiast wywołane wyrażenie funkcji:

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

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

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

Typ danych tablic w React jest bardzo lepszy, tablica może obsługiwać nową tablicę i wspierać filtrowanie, redukcję itp.

Istnieje kilka odpowiedzi wskazujących na użycie mapinstrukcji. Oto kompletny przykład, w którym iterator w składniku FeatureList wyświetla listę składników Feature na podstawie struktury danych JSON o nazwie 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>
); 

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

Aby zapętlić się kilka razy i wrócić, możesz to zrobić za pomocą fromi map:

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

gdzie i = number of times

Jeśli chcesz przypisać unikalne identyfikatory kluczy do renderowanych komponentów, możesz użyć React.Children.toArrayzgodnie z propozycją w dokumentacji React

React.Children.toArray

Zwraca nieprzezroczystą strukturę danych potomną jako płaską tablicę z kluczami przypisanymi do każdego dziecka. Przydatne, jeśli chcesz manipulować kolekcjami dzieci w swoich metodach renderowania, szczególnie jeśli chcesz zmienić kolejność lub pokroić this.props.children przed przekazaniem go.

Uwaga:

React.Children.toArray()zmienia klucze, aby zachować semantykę zagnieżdżonych tablic podczas spłaszczania list dzieci. Oznacza to, że toArray poprzedza każdy klucz w zwróconej tablicy, dzięki czemu klucz każdego elementu jest kierowany do tablicy wejściowej zawierającej go.

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

Jeśli zdecyduje się na konwersję to wewnątrz return () z renderowanie metodę, najprostszym rozwiązaniem byłoby przy użyciu map () metody. Odwzoruj tablicę na 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 => <ObjectRow key={object.id} object={object.value}>) }
</tbody>

Uwaga keyatrybut dodany do komponentu podrzędnego. Jeśli nie podałeś kluczowego atrybutu, możesz zobaczyć następujące ostrzeżenie na konsoli.

Ostrzeżenie: każde dziecko w tablicy lub iteratorze powinno mieć unikalny „klucz” prop.

Uwaga: Jednym z powszechnych błędów popełnianych przez ludzi jest używanie indexklucza podczas iteracji, używanie indexelementu jako klucza jest anty-wzorcem i możesz przeczytać więcej na ten temat tutaj . Krótko mówiąc, jeśli NIE jest to statyczna lista, nigdy nie należy jej używać indexjako klucza.

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

Wewnątrz komponentu ObjectRow

const { object } = this.props

lub

const object = this.props.object

Powinno to doprowadzić do obiektu przekazanego z komponentu nadrzędnego do zmiennej objectw komponencie ObjectRow . Teraz możesz wypluć wartości w tym obiekcie zgodnie ze swoim celem.

Bibliografia :

Metoda map () w JavaScript

Skrypt ECMA 6 lub ES6

powiedzmy, że mamy szereg przedmiotó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>

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>

... Lub możesz również przygotować tablicę obiektów i odwzorować ją na funkcję, aby uzyskać pożądany wynik. Wolę to, ponieważ pomaga mi to zachować dobrą praktykę kodowania bez logiki w zwrocie 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>
  )
}

Wystarczy użyć, .map()aby przejrzeć kolekcję i zwrócić<ObjectRow> przedmioty z rekwizytami z każdej iteracji.

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

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

ES2015 Tablica. Od Z funkcją mapy + klawisz

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

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

Używam tego:

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

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

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

Więc prawdopodobnie 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 niewielka ilość kodu, że wprowadzenie go może działać dobrze.

możesz oczywiście rozwiązać .map, jak sugeruje druga odpowiedź. Jeśli już korzystasz z Babel, możesz pomyśleć o użyciu instrukcji jsx-control. Wymagają one trochę ustawień, ale myślę, że warto je czytać (szczególnie dla niereagujących programistów). Jeśli korzystasz z lintera, istnieje również instrukcja eslint-plugin-jsx-control

Twój kod JSX skompiluje się w czysty kod JavaScript, wszelkie tagi zostaną zastąpione ReactElementobiektami. W JavaScript nie można wywoływać funkcji wiele razy, aby zebrać zwrócone zmienne.

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

Lub możesz użyć, Array.prototype.mapktóry jest dostępny od JavaScript ES5, aby poradzić sobie z tą sytuacją.

Może możemy napisać inny kompilator, aby odtworzyć nową składnię JSX w celu zaimplementowania funkcji powtarzania, takiej jak Angularng-repeat .

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

1. Jak zasugerowano powyżej, przed returnzapisaniem wszystkich elementów w tablicy

2. Pętla w środku 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>
   )

Oto proste rozwiązanie tego problemu.

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 wyrenderować.

Ponieważ piszesz składnię JavaScript w kodzie JSX, musisz owinąć JavaScript w nawiasy klamrowe.

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

Oto przykład z dokumentu React: 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ć w ten sposób:

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

Uwaga: Klucz jest bardzo ważny, ponieważ React używa klucza do różnicowania danych w tablicy.

Używam tego jak

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

Możesz zrobić coś takiego:

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

Świetne pytanie.

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

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 także użyć funkcji samowywołania:

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

           })()}
        </tbody>