JSX gali pateikti bet kokią JavaScript išraišką, todėl sąlyginė renderavimas yra tiesiog normalus JS, naudojamas { } viduje.
jsx
() {
(
);
}
JSX gali pateikti bet kokią JavaScript išraišką, todėl sąlyginė renderavimas yra tiesiog normalus JS, naudojamas { } viduje.
() {
(
);
}
cond && <X/> — pateikti <X/> kai cond yra truthy, kitaip nieko. Puiku "rodyti arba slėpti".cond ? <A/> : <B/> — pasirinkti tarp dviejų šakų.null kad visai nepateiktų nieko.&& su skaičiais{count && <Badge n={count} />} // ❌ when count === 0, React renders "0" on screen!
{count > 0 && <Badge n={count} />} // ✅ guard with a real boolean
Tai nutinka todėl, kad 0 && x įvertinamas į 0, o React pateikia skaičių 0 (bet ne false/null/undefined).
Kai logika tampa sudėtinga, apskaičiuokite elementą prieš grąžinimą skaitomumui:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
Tai JSX pasilaiko plonu ir sprendimo logika aiški.