Saya mencoba melakukan sesuatu seperti yang berikut di Bereaksi JSX(di mana ObjectRow adalah komponen yang terpisah):

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

Saya menyadari dan mengerti mengapa ini tidak valid JSX, karena JSXpeta berfungsi panggilan. Namun, datang dari tanah templat dan menjadi baru JSX, saya tidak yakin bagaimana saya akan mencapai di atas (menambahkan komponen beberapa kali).

Anggap saja Anda hanya memanggil fungsi JavaScript. Anda tidak dapat menggunakan forloop di mana argumen untuk panggilan fungsi akan:

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

Lihat bagaimana fungsi tbodydilewatkan forsebagai argumen, dan tentu saja itu adalah kesalahan sintaksis.

Tapi Anda bisa membuat array, dan meneruskannya sebagai argumen:

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

Anda pada dasarnya dapat menggunakan 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(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;

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

Tidak yakin apakah ini akan berhasil untuk situasi Anda, tetapi seringkali peta adalah jawaban yang baik.

Jika ini kode Anda dengan for loop:

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

Anda bisa menulis seperti ini dengan peta :

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

Sintaks ES6:

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

Jika Anda belum memiliki larik untuk map()menyukai jawaban @ FakeRainBrigand, dan ingin menguraikan ini sehingga tata letak sumber terkait dengan keluaran yang lebih dekat daripada jawaban @ SophieAlpert:

Dengan sintaksis ES2015 (ES6) (fungsi sebar dan panah)

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

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

Re: transpiling dengan Babel, halaman peringatannya mengatakan bahwa Array.fromdiperlukan untuk menyebar, tetapi saat ini ( v5.8.23) yang tampaknya tidak terjadi ketika menyebarkan yang sebenarnya Array. Saya punya masalah dokumentasi yang terbuka untuk mengklarifikasi itu. Tetapi gunakan dengan risiko Anda sendiri atau 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>

Kombinasi teknik dari jawaban lain

Pertahankan tata letak sumber sesuai dengan output, tetapi buat bagian inline lebih kompak:

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

Dengan sintaks & Arraymetode ES2015

Dengan Array.prototype.fillAnda dapat melakukan ini sebagai alternatif untuk menggunakan spread seperti yang diilustrasikan di atas:

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

(Saya pikir Anda benar-benar dapat menghilangkan argumen apa pun fill(), tapi saya tidak 100% tentang itu.) Terima kasih kepada @FakeRainBrigand untuk memperbaiki kesalahan saya dalam versi fill()solusi yang lebih lama (lihat revisi).

key

Dalam semua kasus, keyattr mengurangi peringatan dengan build development, tetapi tidak dapat diakses pada anak. Anda dapat melewati attr tambahan jika Anda ingin indeks tersedia pada anak. Lihat Daftar dan Kunci untuk diskusi.

Cukup menggunakan metode map Array dengan sintaks ES6:

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

Jangan lupakan keypropertinya.

Menggunakan fungsi peta Array adalah cara yang sangat umum untuk loop melalui array elemen dan membuat komponen sesuai dengan mereka dalam Bereaksi , ini adalah cara yang bagus untuk melakukan loop yang cukup efisien dan rapi untuk melakukan loop Anda di JSX , Ini bukan satu-satunya cara untuk melakukannya, tetapi cara yang disukai.

Juga, jangan lupa memiliki Kunci unik untuk setiap iterasi sebagaimana diperlukan. Fungsi peta membuat indeks unik dari 0 tetapi tidak disarankan menggunakan indeks yang dihasilkan tetapi jika nilai Anda unik atau jika ada kunci unik, Anda dapat menggunakannya:

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

Juga, beberapa baris dari MDN jika Anda tidak terbiasa dengan fungsi peta di Array:

map memanggil fungsi callback yang disediakan satu kali untuk setiap elemen dalam sebuah array, secara berurutan, dan membangun sebuah array baru dari hasilnya. panggilan balik dipanggil hanya untuk indeks array yang telah menetapkan nilai, termasuk yang tidak ditentukan. Itu tidak dipanggil untuk elemen array yang hilang (yaitu, indeks yang belum pernah ditetapkan, yang telah dihapus atau yang tidak pernah diberi nilai).

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

Jika parameter thisArg disediakan untuk memetakan, parameter ini akan digunakan sebagai callback untuk nilai ini. Jika tidak, nilai yang tidak terdefinisi akan digunakan sebagai nilai ini. Nilai ini pada akhirnya dapat diamati oleh callback ditentukan sesuai dengan aturan biasa untuk menentukan ini dilihat oleh suatu fungsi.

map tidak mengubah array yang dipanggil (walaupun dipanggil kembali, jika dipanggil, mungkin melakukannya).

Jika Anda sudah menggunakan lodash, _.timesfungsinya sangat praktis.

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

Anda juga dapat mengekstrak di luar blok balik:

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

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

Saya tahu ini adalah utas lama, tetapi Anda mungkin ingin checkout React Templates , yang memungkinkan Anda menggunakan templat gaya jsx dalam bereaksi, dengan beberapa arahan (seperti rt-repeat).

Contoh Anda, jika Anda menggunakan templat reaksi, akan menjadi:

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

Ada beberapa cara untuk melakukan ini. JSX akhirnya dikompilasi ke JavaScript, jadi selama Anda menulis JavaScript yang valid, Anda akan baik-baik saja.

Jawaban saya bertujuan untuk menggabungkan semua cara indah yang telah disajikan di sini:

Jika Anda tidak memiliki array objek, cukup jumlah baris:

di dalam returnblok, membuat Arraydan menggunakan Array.prototype.map:

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

di luar returnblok, cukup gunakan JavaScript normal untuk-loop:

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

ekspresi fungsi segera dipanggil:

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

Jika Anda memiliki berbagai objek

di dalam returnblok, .map()setiap objek ke <ObjectRow>komponen:

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

di luar returnblok, cukup gunakan JavaScript normal untuk-loop:

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

ekspresi fungsi segera dipanggil:

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

jika numrows adalah array, dan itu sangat sederhana.

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

Jenis data array dalam Bereaksi lebih baik, array dapat mendukung array baru, dan mendukung filter, mengurangi dll.

Ada beberapa jawaban yang menunjuk menggunakan mappernyataan itu. Berikut adalah contoh lengkap menggunakan iterator dalam komponen FeatureList untuk mendaftar komponen Fitur berdasarkan pada struktur data JSON yang disebut fitur .

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

Anda dapat melihat kode FeatureList lengkap di GitHub. The fitur perlengkapan terdaftar di sini .

Untuk mengulang beberapa kali dan kembali, Anda dapat mencapainya dengan bantuan fromdan map:

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

dimana i = number of times

Jika Anda ingin menetapkan ID kunci unik ke dalam komponen yang diberikan, Anda dapat menggunakan React.Children.toArrayseperti yang diusulkan di dokumentasi Bereaksi

React.Children.toArray

Mengembalikan struktur data buram anak-anak sebagai array datar dengan kunci yang ditetapkan untuk setiap anak. Berguna jika Anda ingin memanipulasi koleksi anak-anak dalam metode render Anda, terutama jika Anda ingin memesan ulang atau mengiris this.props.children sebelum meneruskannya.

catatan:

React.Children.toArray()mengubah kunci untuk melestarikan semantik array bersarang ketika meratakan daftar anak-anak. Yaitu, toArray mem-prefix setiap kunci dalam array yang dikembalikan sehingga setiap elemen di-scoped ke array input yang mengandungnya.

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

Jika Anda memilih untuk mengkonversi ini dalam kembali () dari render metode, pilihan termudah akan menggunakan peta () metode. Petakan array Anda ke dalam sintaks JSX menggunakan fungsi map (), seperti yang ditunjukkan di bawah ini ( sintaks ES6 digunakan ).

Komponen induk di dalam :

<tbody>
   { objectArray.map(object => <ObjectRow key={object.id} object={object.value}>) }
</tbody>

Harap perhatikan keyatribut yang ditambahkan ke komponen anak Anda. Jika Anda tidak memberikan atribut kunci, Anda dapat melihat peringatan berikut di konsol Anda.

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

Catatan: Satu kesalahan umum yang dilakukan orang adalah menggunakan indexkunci saat iterasi, penggunaan indexelemen sebagai kunci adalah anti-pola dan Anda dapat membaca lebih lanjut tentang hal itu di sini . Singkatnya, jika BUKAN daftar statis tidak pernah digunakan indexsebagai kunci.

Sekarang di komponen ObjectRow , Anda dapat mengakses objek dari propertinya.

Di dalam komponen ObjectRow

const { object } = this.props

atau

const object = this.props.object

Ini akan menjemputmu objek yang kamu lewati dari komponen induk ke variabel objectdi komponen ObjectRow . Sekarang Anda dapat memuntahkan nilai-nilai dalam objek itu sesuai dengan tujuan Anda.

Referensi :

metode map () dalam Javascript

ECMA Script 6 atau ES6

katakanlah kami memiliki berbagai item di negara Anda:

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

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

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

...

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

... Atau Anda juga dapat menyiapkan berbagai objek dan memetakannya ke suatu fungsi untuk mendapatkan hasil yang diinginkan. Saya lebih suka ini, karena ini membantu saya untuk menjaga praktik pengkodean yang baik tanpa logika di dalam kembalinya render.

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

Cukup gunakan .map()untuk mengulang koleksi Anda dan mengembalikan <ObjectRow>item dengan properti dari setiap iterasi.

Dengan asumsi objectsadalah array di suatu tempat ...

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

ES2015 Array.dari dengan fungsi + tombol peta

Jika tidak ada yang dapat .map()Anda gunakan Array.from()dengan mapfungsi untuk mengulangi elemen:

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

Saya menggunakan ini:

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

PS: jangan pernah lupa kuncinya atau Anda akan memiliki banyak peringatan!

Saya cenderung menyukai pendekatan di mana logika pemrograman terjadi di luar nilai kembali render. Ini membantu menjaga apa yang sebenarnya mudah grok.

Jadi saya mungkin akan melakukan sesuatu seperti:

import _ from 'lodash';

...

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

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

Memang ini adalah sejumlah kecil kode yang sebaris mungkin berfungsi dengan baik.

Anda tentu saja dapat menyelesaikannya dengan .map seperti yang disarankan oleh jawaban lain. Jika Anda sudah menggunakan babel, Anda bisa berpikir tentang menggunakan jsx-control-statement. Mereka memerlukan sedikit pengaturan, tapi saya pikir itu layak dalam hal keterbacaan (terutama untuk pengembang non-reaksi). Jika Anda menggunakan linter, ada juga eslint-plugin-jsx-control-statement

Kode JSX Anda akan dikompilasi menjadi kode JavaScript murni, tag apa pun akan diganti oleh ReactElementobjek. Dalam JavaScript, Anda tidak dapat memanggil fungsi beberapa kali untuk mengumpulkan variabel yang dikembalikan.

Itu ilegal, satu-satunya cara adalah menggunakan array untuk menyimpan fungsi yang dikembalikan variabel.

Atau Anda dapat menggunakan Array.prototype.mapyang tersedia sejak JavaScript ES5 untuk menangani situasi ini.

Mungkin kita dapat menulis kompiler lain untuk membuat ulang sintaks JSX baru untuk mengimplementasikan fungsi pengulangan seperti milik Angularng-repeat .

Ini dapat dilakukan dengan berbagai cara.

1. Seperti yang disarankan di atas, sebelum returnmenyimpan semua elemen dalam array

2. Loop di dalam return

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

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

Inilah solusi sederhana untuk itu.

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

Tidak diperlukan pemetaan dan kode kompleks. Anda hanya perlu mendorong baris ke array dan mengembalikan nilai untuk merendernya.

Karena Anda menulis sintaksis Javascript di dalam kode JSX, Anda perlu membungkus Javascript Anda dalam kurung kurawal.

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

Berikut ini contoh dari React doc: 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>
  );
}

sebagai kasus Anda, saya sarankan menulis seperti ini:

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

Harap perhatikan bahwa Kunci sangat penting, karena Bereaksi gunakan Kunci untuk membedakan data dalam larik.

Saya menggunakannya seperti

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

Anda dapat melakukan sesuatu seperti:

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

Pertanyaan yang bagus

Apa yang saya lakukan ketika saya ingin menambahkan sejumlah komponen adalah menggunakan fungsi pembantu.

Tentukan fungsi yang mengembalikan JSX:

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

//... in JSX

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

Anda juga dapat menggunakan fungsi self-invaging:

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

           })()}
        </tbody>