Anggap saja seperti anda're hanya memanggil fungsi JavaScript. Anda dapat't menggunakan untuk lingkaran di mana argumen untuk fungsi panggilan akan pergi:

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

Lihat bagaimana fungsi tbody sedang berlalu untuk loop sebagai argumen, dan tentu saja itu's kesalahan sintaks.

Tetapi anda dapat membuat sebuah array, dan kemudian lulus sebagai argumen:

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

Anda dapat menggunakan pada dasarnya struktur yang sama ketika bekerja dengan 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>;

Kebetulan, saya JavaScript contoh hampir persis apa itu contoh dari BEJ berubah menjadi. Bermain-main dengan Babel REPL untuk mendapatkan merasakan bagaimana JSX bekerja.

Tidak yakin apakah ini akan bekerja untuk situasi anda, tetapi sering peta adalah jawaban yang baik.

Jika ini adalah kode anda dengan untuk loop:

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

    } 
</tbody>

Anda bisa menulis seperti ini dengan peta:

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

ES6 sintaks:

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

Jika anda don't sudah memiliki sebuah array untuk peta() seperti @FakeRainBrigand's jawaban, dan ingin inline ini jadi sumber tata letak sesuai dengan output yang lebih dekat dari @SophieAlpert's jawaban:

Dengan ES2015 (ES6) sintaks (menyebar dan panah fungsi)

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

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

  )}
</tbody>

Re: transpiling dengan Babel, yang peringatan halaman mengatakan bahwa Array.dari diperlukan untuk menyebar, tetapi pada saat ini (v5.8.23) itu tampaknya tidak menjadi kasus ketika menyebarkan sebenarnya Array. Saya memiliki dokumentasi masalah terbuka untuk mengklarifikasi itu. Tapi gunakan dengan resiko anda sendiri atau polyfill.

Vanilla ES5

Array.menerapkan

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

Inline HIDUP

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

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

Hanya menggunakan peta Array metode dengan ES6 sintaks:

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

Don't melupakan kunci properti.

Menggunakan Array peta fungsi adalah cara yang sangat umum untuk loop melalui Hotel elemen-elemen dan membuat komponen sesuai mereka di Bereaksi, ini adalah cara yang bagus untuk melakukan loop yang cukup efisien dan rapi cara untuk melakukan loop di JSX, It's tidak satu-satunya cara untuk melakukan itu, tapi cara yang lebih disukai.

Juga, don't forget memiliki Kunci unik untuk setiap iterasi yang diperlukan. Fungsi peta menciptakan indeks yang unik dari 0 tetapi's tidak dianjurkan menggunakan yang dihasilkan indeks tetapi jika nilai anda adalah unik atau jika ada sebuah kunci yang unik, anda dapat menggunakan mereka:

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

Juga, beberapa baris dari MDN jika anda tidak akrab dengan peta fungsi pada Array:

peta panggilan yang disediakan fungsi callback sekali untuk masing-masing unsur dalam array, dalam rangka, dan membangun sebuah array baru dari hasil. callback dipanggil hanya untuk indeks dari array yang telah ditetapkan dengan nilai-nilai, termasuk tidak terdefinisi. Hal ini tidak dipanggil untuk unsur-unsur yang hilang dari array (yaitu, indeks yang telah pernah ditetapkan, yang telah dihapus atau yang belum pernah diberi nilai).

callback dipanggil dengan tiga argumen: nilai dari elemen, indeks dari elemen, dan Array objek yang sedang dilalui.

Jika thisArg parameter yang disediakan untuk peta, itu akan digunakan sebagai callback's nilai ini. Jika tidak, nilai yang tidak terdefinisi akan digunakan sebagai untuk nilai ini. Nilai ini pada akhirnya dapat diamati oleh callback ditentukan menurut aturan yang biasa untuk menentukan ini terlihat oleh sebuah fungsi.

peta tidak bermutasi array yang disebut (meskipun callback, jika dipanggil, dapat melakukannya).

Jika anda're sudah menggunakan lodash, yang _.kali fungsi ini berguna.

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

Anda juga dapat mengekstrak luar kembali blok:

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

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

Saya tahu ini adalah thread lama, tapi mungkin anda ingin checkout Bereaksi Template, yang tidak membiarkan anda menggunakan jsx-gaya template dalam bereaksi, dengan beberapa arahan (seperti rt-repeat).

Contoh, jika anda menggunakan bereaksi-template, akan sama:

<tbody>

</tbody>

Ada beberapa cara untuk pergi tentang melakukan hal ini. JSX akhirnya akan dikompilasi untuk JavaScript, jadi selama anda're menulis berlaku JavaScript, anda'll menjadi baik.

Jawaban saya bertujuan untuk mengkonsolidasikan semua cara sudah disajikan berikut ini:

Jika anda tidak memiliki sebuah array dari objek, hanya jumlah baris:

dalam kembali block, menciptakan sebuah Array dan menggunakan Array.prototipe.peta:

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

      ))}
    </tbody>
  );
}

di luar kembali blok, hanya menggunakan JavaScript normal untuk loop:

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

segera dipanggil ekspresi fungsi:

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

Jika anda memiliki sebuah array dari objek

dalam kembali blok .peta() setiap objek ke <ObjectRow> komponen:

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

      ))}
    </tbody>
  );
}

di luar kembali blok, hanya menggunakan JavaScript normal untuk loop:

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

segera dipanggil ekspresi fungsi:

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

jika numrows adalah array, dan's sangat sederhana.

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

Array tipe data dalam Bereaksi sangat baik, array dapat membuat array baru, dan dukungan filter, mengurangi dll.

Ada beberapa jawaban yang menunjuk untuk menggunakan peta pernyataan. Berikut adalah contoh lengkap menggunakan iterator dalam FeatureList komponen untuk daftar * Fitur komponen-komponen didasarkan pada data JSON struktur yang disebut fitur**.

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

Anda dapat melihat lengkap FeatureList kode pada GitHub. The memiliki perlengkapan yang tercantum di sini.

mari kita mengatakan bahwa kita memiliki sebuah array dari item di negara anda:

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

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

    })} 
</tbody>

...Atau anda juga bisa mempersiapkan sebuah array dari objek dan peta itu untuk fungsi yang memiliki keluaran yang diinginkan. Saya lebih suka ini, karena itu membantu saya untuk menjaga praktek yang baik dari coding dengan tidak ada logika dalam kembali membuat.

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

Cukup gunakan .peta() untuk loop melalui koleksi anda dan kembali <ObjectRow> item dengan alat peraga dari masing-masing iterasi.

Dengan asumsi objek adalah array di suatu tempat...

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

Jika anda memilih untuk mengubah ini dalam kembali( ) dari membuat metode, pilihan termudah akan menggunakan peta( ) metode. Peta array ke BEJ sintaks menggunakan peta() fungsi, seperti yang ditunjukkan di bawah ini (ES6 sintaks yang digunakan).

Di dalam induk komponen:

``

Harap dicatat kunci atribut ditambahkan ke anak anda komponen. Jika anda didn't memberikan atribut kunci, anda dapat melihat peringatan berikut pada konsol anda.

Peringatan: Setiap anak dalam array atau iterator harus memiliki unik "kunci" prop.

Sekarang di ObjectRow komponen anda dapat mengakses objek dari itu's properties.

Di dalam ObjectRow komponen

const { benda } = ini.alat peraga

atau

const object = ini.alat peraga.objek

Ini harus mengambil objek yang diturunkan dari induk komponen untuk variabel objek di ObjectRow komponen. Sekarang anda bisa meludah keluar nilai-nilai dalam objek yang sesuai dengan tujuan anda.

Referensi :

peta() metode dalam Javascript

ECMA Script 6 atau ES6

Saya menggunakan ini:

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

);

PD: jangan lupa kunci atau anda akan memiliki banyak peringatan !

Sebuah ES2015 / Babel kemungkinan menggunakan generator fungsi untuk membuat array JSX:

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

...

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

    )]}
</tbody>

ES2015 Array.dari dengan fungsi peta + kunci

Jika anda memiliki apa-apa .peta() anda dapat menggunakan Array.dari() dengan peta fungsi untuk mengulang unsur-unsur:

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

Saya cenderung untuk mendukung pendekatan di mana logika pemrograman yang terjadi di luar nilai kembali dari render. Hal ini membantu menjaga apa yang sebenarnya diberikan mudah untuk grok.

Jadi saya'd mungkin melakukan sesuatu seperti:

import _ from 'lodash';

...

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

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

Memang ini adalah seperti sejumlah kecil dari kode yang inlining itu mungkin bekerja dengan baik.

Untuk loop untuk beberapa kali dan kembali, anda dapat mencapai itu dengan bantuan dari tahun dan peta:

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

di mana i = jumlah kali