JSX herhangi bir JavaScript ifadesini render edebilir, bu nedenle koşullu render etme basitçe { } içinde kullanılan normal JS'dir.
jsx
() {
(
);
}
JSX herhangi bir JavaScript ifadesini render edebilir, bu nedenle koşullu render etme basitçe { } içinde kullanılan normal JS'dir.
() {
(
);
}
cond && <X/> — cond doğruysa <X/> render et, aksi takdirde hiçbir şey yok. "göster veya gizle" için harika.cond ? <A/> : <B/> — iki dal arasında seç.null döndür hiçbir şey render etmemek için.&& sayılarla{count && <Badge n={count} />} // ❌ when count === 0, React renders "0" on screen!
{count > 0 && <Badge n={count} />} // ✅ guard with a real boolean
Bu, 0 && x ifadesi 0 olarak değerlendirildiğinde gerçekleşir ve React 0 sayısını render eder (ancak false/null/undefined değil).
Mantık karmaşıklaştığında, okunabilirlik için öğeyi return'den önce hesapla:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
Bu, JSX'i düz tutar ve karar mantığını açık hale getirir.
Junior'dan Senior'a detaylı cevaplarla bir BT mülakat soruları kütüphanesi.
Bağış Yap