Senarai, Kunci dan Pemaparan Bersyarat
Paparkan array elemen dengan .map(), bekalkan props key yang stabil, dan paparkan elemen secara bersyarat dengan && serta operator ternari.
Senarai, Kunci dan Pemaparan Bersyarat ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.
Memaparkan Senarai dengan .map()
Paparkan senarai dinamik dengan memanggil .map() pada tatasusunan dan memulangkan JSX bagi setiap item. React memaparkan tatasusunan elemen sama seperti satu elemen.
const fruits = ['apple', 'banana', 'cherry'];
return (
<ul>
{fruits.map(fruit => (
<li key={fruit}>{fruit}</li>
))}
</ul>
);Prop key — Mengapa Ia Penting
key ialah prop React khas yang membantunya mengenal pasti item dalam senarai yang berubah, ditambah atau dialih keluar. Tanpa kunci (atau dengan kunci yang tidak stabil seperti indeks), React mungkin menghasilkan kemas kini yang tidak betul.
Kunci Baik berbanding Kunci Tidak Baik
Kunci yang baik: ID unik dan stabil daripada data anda (contohnya, item.id). Kunci yang tidak baik: indeks tatasusunan (item boleh disusun semula) atau nilai rawak (berubah pada setiap paparan).
// Bad: index keys — breaks when list reorders
{items.map((item, i) => <Item key={i} {...item} />)}
// Good: stable unique IDs
{items.map(item => <Item key={item.id} {...item} />)}Memaparkan Objek
Petakan tatasusunan objek kepada komponen dengan menguraikan objek tersebut menjadi props.
interface Todo { id: number; text: string; done: boolean; }
const todos: Todo[] = [...];
return (
<ul>
{todos.map(({ id, text, done }) => (
<TodoItem key={id} text={text} done={done} />
))}
</ul>
);Paparan Bersyarat dengan &&
Gunakan operator litar pintas && untuk memasukkan JSX secara bersyarat. Jika bahagian kiri bernilai palsu, tiada apa-apa dipaparkan. Berhati-hati dengan nombor bernilai palsu — 0 dipaparkan sebagai '0'.
function Status({ count }: { count: number }) {
return (
<div>
{count > 0 && <Badge count={count} />}
{/* Safer: */}
{count > 0 ? <Badge count={count} /> : null}
</div>
);
}Paparan Bersyarat dengan Ternari
Gunakan operator ternari untuk memaparkan salah satu daripada dua elemen berdasarkan syarat.
function AuthButton({ isLoggedIn }: { isLoggedIn: boolean }) {
return isLoggedIn
? <button onClick={logout}>Sign Out</button>
: <button onClick={login}>Sign In</button>;
}Paparan Bersyarat dengan Pernyataan if
Untuk syarat yang kompleks, gunakan pernyataan if sebelum return. Kembalikan nilai lebih awal untuk keadaan pemuatan atau ralat.
function UserProfile({ user }: { user: User | null }) {
if (!user) return <p>Loading...</p>;
if (user.banned) return <p>Account suspended.</p>;
return (
<div>
<h1>{user.name}</h1>
<p>{user.email}</p>
</div>
);
}Menapis Sebelum Memetakan
Tapis tatasusunan sebelum memetakannya untuk memaparkan item yang sepadan sahaja. Ini kemas dan mudah dibaca.
const activeUsers = users.filter(u => u.active);
return (
<ul>
{activeUsers.map(user => (
<UserItem key={user.id} {...user} />
))}
</ul>
);Keadaan Kosong
Sentiasa kendalikan kes tatasusunan kosong. Memaparkan senarai kosong secara senyap mengelirukan — sebaliknya paparkan mesej keadaan kosong yang membantu.
return (
<div>
{todos.length === 0
? <p className="empty-state">No tasks yet. Add one above!</p>
: <ul>{todos.map(t => <TodoItem key={t.id} {...t} />)}</ul>
}
</div>
);Pemaparan Portal untuk Senarai
Senarai panjang yang perlu dipaparkan dalam nod DOM yang berbeza (seperti menu juntai bawah) boleh menggunakan ReactDOM.createPortal. Namun, kebanyakan pemaparan senarai adalah mudah dan berlaku dalam pepohon yang sama.
Senarai Maya untuk Prestasi
Untuk senarai yang sangat panjang (1,000 item atau lebih), gunakan pustaka pemayaan seperti react-window atau @tanstack/react-virtual. Pustaka ini hanya memaparkan baris yang kelihatan, sekali gus mengelakkan isu prestasi DOM.
Semakan Pantas
Bilakah boleh diterima untuk menggunakan indeks tatasusunan sebagai key dalam senarai React?
Rumusan: Senarai dan Pemaparan Bersyarat
Petakan senarai dengan .map(). Sentiasa tambahkan props kunci unik yang stabil. && untuk elemen pilihan (berhati-hati dengan 0). Gunakan operator ternari untuk salah satu daripada dua pilihan. Gunakan pemulangan awal untuk keadaan pemuatan/ralat. Tapis sebelum memetakan untuk senarai bersyarat. Paparkan mesej keadaan kosong untuk tatasusunan kosong. Maya-kan senarai yang sangat panjang.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Soalan Lazim
Adakah pelajaran “Senarai, Kunci dan Pemaparan Bersyarat” percuma?
Ya — teks penuh “Senarai, Kunci dan Pemaparan Bersyarat” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Senarai, Kunci dan Pemaparan Bersyarat”?
Paparkan array elemen dengan .map(), bekalkan props key yang stabil, dan paparkan elemen secara bersyarat dengan && serta operator ternari. Anda berlatih Frontend Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Frontend Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “Senarai, Kunci dan Pemaparan Bersyarat” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- JSX: Sintaks dan Transpilasi
- Komponen Fungsian dan Props
- Hook useState: State dan Pemaparan Semula
- Senarai, Kunci dan Pemaparan Bersyarat