JSX dapat memberikan sebarang expression JavaScript, jadi rendering bersyarat hanyalah JS biasa yang digunakan dalam { }.
jsx
() {
(
);
}
JSX dapat memberikan sebarang expression JavaScript, jadi rendering bersyarat hanyalah JS biasa yang digunakan dalam { }.
() {
(
);
}
Pustaka soalan temu duga IT dengan jawapan terperinci — daripada Junior hingga Senior.
Dermacond && <X/> — berikan <X/> apabila cond adalah truthy, jika tidak tidak ada. Sempurna untuk "tunjukkan atau sembunyikan".cond ? <A/> : <B/> — pilih antara dua cabang.null untuk tidak memberikan apa-apa sama sekali.&& dengan nombor{count && <Badge n={count} />} // ❌ when count === 0, React renders "0" on screen!
{count > 0 && <Badge n={count} />} // ✅ guard with a real boolean
Ini berlaku kerana 0 && x dinilai kepada 0, dan React memberikan nombor 0 (tetapi bukan false/null/undefined).
Apabila logik menjadi rumit, hitung element sebelum pulang untuk kebolehbacaan:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
Ini memastikan JSX tetap rata dan logik keputusan jelas.