A JSX bármilyen JavaScript kifejezést megjeleníthet, tehát a feltételes megjelenítés csak a normál JS-t használja a { } belsejében.
jsx
() {
(
);
}
A JSX bármilyen JavaScript kifejezést megjeleníthet, tehát a feltételes megjelenítés csak a normál JS-t használja a { } belsejében.
() {
(
);
}
cond && <X/> — a <X/> megjelenítése, ha a cond igazságértékű, egyébként semmi. Kiváló a "megjelenítés vagy elrejtés" esetén.cond ? <A/> : <B/> — választás két ág között.null visszaadása, hogy egyáltalán semmi ne jelenjen meg.&& számokkal{count && <Badge n={count} />} // ❌ when count === 0, React renders "0" on screen!
{count > 0 && <Badge n={count} />} // ✅ guard with a real boolean
Ez azért történik, mert a 0 && x kifejezés 0-ra értékelődik ki, és a React a 0 számot jeleníti meg (de nem a false/null/undefined értékeket).
Ha a logika összetett lesz, számítsa ki az elemet a return előtt az olvashatóság érdekében:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
Ez a JSX-et laposabbá és az döntési logikát egyértelművé teszi.