Daftar & key; rendering kondisional
Render array dengan map(), pilih key yang stabil, tangani keadaan kosong/memuat, dan terapkan pola kondisional umum.
Daftar & key; rendering kondisional adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 3 pelajaran total.
Gambaran umum
Tujuan: Tampilkan larik dengan aman dan jelas menggunakan kunci, serta gunakan pola kondisional sederhana untuk antarmuka pengguna kosong atau sedang dimuat.
map() untuk menampilkan larik
Gunakan array.map() untuk mengubah data menjadi elemen; setiap elemen anak langsung dalam daftar memerlukan properti kunci agar rekonsiliasi tetap stabil.
Demo: daftar + kunci
Gunakan pengenal stabil dari data Anda sebagai kunci; hindari penggunaan indeks larik kecuali daftarnya statis.
<div id="root"></div>
Dasar-dasar perenderan kondisional
Kondisional:
- Keadaan kosong: tampilkan pesan yang ramah saat daftar kosong.
- Pemuatan: tampilkan indikator pemuatan atau kerangka.
- Pilihan perenderan: cond ? A : B atau cond && A.
Demo: antarmuka pemuatan/kosong
Tangani kasus pemuatan dan kosong secara eksplisit untuk menghindari layar kosong.
<div id="root"></div>
Kiat kunci & kondisional
Kiat:
- Gunakan pengenal stabil sebagai kunci; hindari indeks untuk daftar dinamis.
- Letakkan kunci pada elemen terluar yang dihasilkan oleh pemetaan.
- Jaga agar kondisional tetap kecil dan mudah dibaca.
Praktik terbaik untuk kunci
Ringkasan
Ringkasan: Petakan larik menjadi elemen dengan kunci yang stabil, lalu tangani keadaan pemuatan/kosong menggunakan pola kondisional sederhana.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Daftar & key; rendering kondisional” gratis?
Ya — teks lengkap “Daftar & key; rendering kondisional” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 3 pelajaran total.
Apa yang akan aku pelajari di “Daftar & key; rendering kondisional”?
Render array dengan map(), pilih key yang stabil, tangani keadaan kosong/memuat, dan terapkan pola kondisional umum. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai React Academy?
Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 3.
Berapa lama pelajaran “Daftar & key; rendering kondisional” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?
Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Aturan JSX: ekspresi, atribut, fragmen
- Daftar & key; rendering kondisional
- Pilihan gaya: CSS Modules, gaya inline, helper kelas