Cred că de ea ca tine're sunat funcții JavaScript. Puteți't folosi-o pentru buclă în care argumentele de la un apel de funcție ar merge:

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

A se vedea cât de functia tbody este trecut un "pentru" buclă ca un argument, și, desigur, că's o eroare de sintaxă.

Dar puteți face o matrice, și apoi trece în ca argument:

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

Puteți utiliza practic aceeași structură atunci când se lucrează cu 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();
}
return <tbody>{rows}</tbody>;

De altfel, JavaScript mea de exemplu este aproape exact ceea ce acest exemplu de JSX transformă în. Juca în jurul cu Babel REPL pentru a obține o simt pentru cât de JSX funcționează.

Nu sunt sigur dacă acest lucru va lucra pentru situatia ta, dar de multe ori harta este un răspuns bun.

Dacă acest lucru a fost codul cu buclă pentru:

<tbody>
    for (var i=0; i < objects.length; i++) {

    } 
</tbody>

Ai putea scrie astfel cu harta:

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

ES6 sintaxa:

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

Dacă tu nu't au deja o serie de a map() ca @FakeRainBrigand's a răspunde, și vreau să inline asta deci sursa aspect corespunde de ieșire mai aproape decât @SophieAlpert's răspuns:

Cu ES2015 (ES6) sintaxă (a răspândit și săgeata funcții)

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

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

  )}
</tbody>

Re: transpiling cu Babel, sa limitări page spune că Matrice.de este necesar pentru răspândit, dar în prezent (v5.8.23), care nu pare să fie cazul atunci când răspândește un efectiv de "Matrice". Am o documentația problema pentru a clarifica faptul că. Dar utilizarea pe propriul risc sau polyfill.

ES5 vanilie

Matrice.aplica

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

Inline VIATA

http://plnkr.co/edit/4kQjdTzd4w69g8Suu2hT?p=preview

<tbody>
  {(function (rows, i, len) {
    while (++i 

Pur și simplu, folosind harta Matrice metoda cu ES6 sintaxa:

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

Don't uita "cheia" de proprietate.

Folosind Matrice hartă funcția este foarte comun mod de a bucla prin o Matrice de elemente și de a crea componente conform le în Reacționa, aceasta este o modalitate foarte bună de a face o buclă care este destul de eficient și ordonat mod de a face bucle în JSX, L's nu singurul mod de a o face, dar modul preferat.

De asemenea, don't uita de a avea o Cheie unică pentru fiecare repetare după cum este necesar. Funcția de hartă creează un index unic de la 0 dar's nu se recomandă utilizarea de produse index dar dacă valoarea ta este unic sau dacă există o cheie unică, le puteți folosi:

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

De asemenea, câteva rânduri de la MDN dacă nu sunteți familiarizați cu funcția hartă pe Matrice:

harta solicită un prevăzute funcția callback o dată pentru fiecare element într-o matrice, în ordine, și construiește o nouă serie de rezultate. callback este invocată doar de indicii din matrice care au atribuit valori, inclusiv nedefinit. Acesta nu este numit pentru lipsă elemente ale matrice (care este, indici care nu au fost stabilite, care au fost eliminat sau care nu au fost niciodată atribuie o valoare).

callback este apelată cu trei argumente: valoarea de element, indicele elementului, și obiectul Array fiind traversat.

Dacă o thisArg parametru este oferit hartă, acesta va fi folosit ca apel invers's această valoare. În caz contrar, valoarea nedefinit va fi folosit ca cu această valoare. Această valoare, în cele din urmă observabile de apel invers este determinat conform regulilor obișnuite pentru determinarea acestui văzut printr-o funcție.

harta nu evolua matrice pe care este chemat (deși apel invers, în cazul invocat, pot face acest lucru).

Daca're deja folosind lodash, a _.ori funcția este la îndemână.

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}>
                                bacon
                                cheez

Puteți extrage, de asemenea, în afara reveni bloc:

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

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

Stiu ca e un thread vechi, dar poate vrei să checkout Reacționa Template-uri, care nu te lasa sa folosesc jsx-șabloane de stil în reacționa, cu câteva directive (cum ar fi rt-repetare).

Exemplul tău, dacă te-ai folosit de a reacționa-template-uri, ar fi:

<tbody>

</tbody>

Există mai multe moduri de a merge despre a face acest lucru. JSX în cele din urmă devine compilat pentru JavaScript, atâta timp cât tu're scris JavaScript valid, te'll fi bine.

Răspunsul meu își propune să consolideze toate căile minunate prezentat deja aici:

Dacă nu aveți o serie de obiect, pur și simplu numărul de rânduri:

în cadrul "returnare" bloc, creând o "Matrice" și folosirea Largă.prototip.harta:

render() {
  return (
    <tbody>
      {Array(numrows).fill(null).map((value, index) => (

      ))}
    </tbody>
  );
}

în afara "returnare" bloca, pur și simplu utilizați un normal JavaScript pentru-bucla:

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

imediat invocat funcție de expresia:

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

Dacă aveți o serie de obiecte

în return bloc .harta() fiecare obiect să o <ObjectRow> componenta:

render() {
  return (
    <tbody>
      {objectRows.map((row, index) => (

      ))}
    </tbody>
  );
}

în afara "returnare" bloca, pur și simplu utilizați un normal JavaScript pentru-bucla:

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

imediat invocat funcție de expresia:

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

dacă numrows este o matrice, și-l's foarte simplu.

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

Matrice de tip de date în Reacționa este foarte bine, matrice poate noi matrice, și suport de filtru, se reduce etc.

Există mai multe răspunsuri de indicare a utiliza "harta" declarație. Aici este un exemplu complet, folosind un iterator, în FeatureList componenta de listă Caracteristică componente bazate pe un JSON structură de date numită caracteristici.

const FeatureList = ({ features, onClickFeature, onClickLikes }) => (
  <div className="feature-list">
    {features.map(feature =>
       onClickFeature(feature.id)}
        onClickLikes={() => onClickLikes(feature.id)}
      />
    )}
  </div>
); 

Puteți vizualiza complet FeatureList code de pe GitHub. De caracteristici de prindere este listat aici.

să ne spunem că avem o serie de articole în stat:

[{name: "item1", id: 1}, {name: "item2", id: 2}, {name: "item3", id: 3}]

<tbody>
    {this.state.items.map((item) => {

    })} 
</tbody>

...Sau puteți pregăti, de asemenea, o serie de obiecte și pe hartă pentru a o funcție pentru a avea rezultatul dorit. Eu o prefer pe asta, pentru că mă ajută să-și mențină o bună practică de codificare cu nici o logică în interiorul întoarcerea de render.

render() {
const mapItem = [];
for(let i =0;i (item, index) {
 // item the single item in the array 
 // the index of the item in the array
 // can implement any logic here
 return (

)

}
  return(
   <tbody>{mapItem.map(singleItem)}</tbody>
  )
}

Pur și simplu utilizați .harta() pentru a bucla prin colecția ta și a reveni ` articole cu elemente de recuzită de la fiecare iterație.

Presupunând că "obiectele" este o matrice undeva...

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

Dacă optați pentru a converti acest interior return( ) de face metodă, mai simplă opțiune ar fi utilizarea map( ) metoda. Harta matrice în JSX folosind sintaxa map() funcția, așa cum se arată mai jos (ES6 sintaxa este folosit).

În interiorul componentei părinte:

``

Vă rugăm să rețineți "cheia" atribut adăugat pentru copilul dumneavoastră componentă. Dacă ai n't oferi atributul cheie, puteți vedea următorul mesaj de avertizare de pe consola ta.

Atentie: Fiecare copil într-o matrice sau iterator ar trebui să aibă un unic "cheie" prop.

Acum la ObjectRow componenta puteți accesa obiect de l's properties.

În interiorul ObjectRow component

const { obiect } = acest lucru.elemente de recuzită

sau

const obiect = acest lucru.elemente de recuzită.obiect

Acest lucru ar trebui să vă aducă obiect ai trecut de la părinte componenta variabila "obiect" în ObjectRow componenta. Acum puteți scuipa valorile în care obiect în funcție de scopul dumneavoastră.

Referințe :

map() metoda în Javascript

ECMA Script 6 sau ES6

Eu folosesc asta:

gridItems = this.state.applications.map(app =>

);

PD: nu uita cheia sau veți avea o mulțime de avertismente !

O ES2015 / Babel posibilitate este utilizarea unui generator de funcție pentru a crea o serie de JSX:

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

...

<tbody>
    {[...jsxLoop(numrows, i =>

    )]}
</tbody>

ES2015 Matrice.de la cu funcția hartă + cheie

Dacă aveți nimic de-a .harta() ai pot folosi Matrice.din()` cu "harta" funcția de a repeta elemente:

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

Eu tind să favorizeze o abordare în cazul în care logica de programare se întâmplă în afara întoarce valoarea render. Aceasta vă ajută să păstrați ce este de fapt prestate de ușor să înțelegi.

Așa că m-am'd face, probabil, ceva de genul:

import _ from 'lodash';

...

const TableBody = ({ objects }) => {
  const objectRows = objects.map(obj => );      

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

Desigur, aceasta este o astfel de cantitate mică de cod care inlining ar putea să funcționeze bine.

La bucla pentru un număr de ori și să se întoarcă, puteți realiza cu ajutorul din și hartă:

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

unde i = număr de ori