JSX může vykreslit libovolný JavaScript výraz, takže podmíněné vykreslování je pouze normální JS používaný uvnitř { }.
jsx
() {
(
);
}
JSX může vykreslit libovolný JavaScript výraz, takže podmíněné vykreslování je pouze normální JS používaný uvnitř { }.
() {
(
);
}
cond && <X/> — vykresli <X/> když je cond pravda, jinak nic. Skvělé pro "zobrazit nebo skrýt".cond ? <A/> : <B/> — vyber mezi dvěma větvemi.null aby se nic nevykreslilo.&& s čísly{count && <Badge n={count} />} // ❌ when count === 0, React renders "0" on screen!
{count > 0 && <Badge n={count} />} // ✅ guard with a real boolean
Ta se stane, protože 0 && x vyhodnotí na 0, a React vykreslí číslo 0 (ale ne false/null/undefined).
Když se logika stane složitou, vypočítej element před returnem pro lepší čitelnost:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
Toto udržuje JSX ploché a logiku rozhodování jasnou.