Rendering berulang

function NameList() {
  const names = [{
    name: 'Jack'
  }, {
    name: 'Rose'
  }];
	return (
  	<div>
    {
      names.map((item, index) => (
        <span>{ `No.${index}: ${item.name}` }</span>
      ))
    }
    </div>
  );
}

​

Konfigurasikan

• Pengaturan statis - Konfigurasikan data array statis yang akan dirender.
• Pengikatan variabel - Ikat variabel untuk mengambil loop data dari variabel global atau API jarak jauh.

• this.item - Mengambil loop data untuk record saat ini.
• this.index - Mengambil indeks loop untuk record saat ini (dimulai dari 0).

​

Kasus penggunaan

• Buat variabel global untuk menyimpan informasi siswa, seperti ditunjukkan di bawah ini:
• Seret komponen container ke halaman untuk mengikat loop data, seperti ditunjukkan di bawah ini:
• Letakkan dua komponen teks di dalam container untuk mengikat nama siswa (name) dan usia siswa (age), seperti ditunjukkan di bawah ini:
• Klik tombol Pratinjau di pojok kanan atas untuk melihat efek rendering berulang, seperti ditunjukkan di bawah ini:
• Perhatikan bahwa hobi siswa juga berupa array. Untuk merendernya, diperlukan loop bersarang. Seret komponen teks lain ke dalam container untuk merender hobi secara berulang. (Agar komponen teks tersebut dapat mengakses konten dari loop luar secara bersamaan, atur nama variabel iterasi dan indeks kustom untuk komponen teks tersebut.)
• Selanjutnya, ikat variabel ke atribut content pada teks untuk menampilkan konten dari kedua loop, seperti ditunjukkan di bawah ini:
• Terakhir, klik tombol Pratinjau untuk melihat efek pratinjau berikut: