JSX lahko renderira katerikoli JavaScript izraz, zato je pogojno renderiranje le navaden JS, ki se uporablja znotraj { }.
jsx
() {
(
);
}
JSX lahko renderira katerikoli JavaScript izraz, zato je pogojno renderiranje le navaden JS, ki se uporablja znotraj { }.
() {
(
);
}
cond && <X/> — renderira <X/>, ko je cond resničen, sicer nič. Odličen za "pokaži ali skrij".cond ? <A/> : <B/> — izbira med dvema vejama.null da sploh ne renderira ničesar.&& s števili{count && <Badge n={count} />} // ❌ when count === 0, React renders "0" on screen!
{count > 0 && <Badge n={count} />} // ✅ guard with a real boolean
To se zgodi, ker se 0 && x ovrednoti na 0, in React renderira število 0 (ne pa false/null/undefined).
Ko logika postane zapletena, izračunajte element pred return za boljšo berljivost:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
To ohranja JSX raven in logiko odločanja jasno.