JSX może renderować każde JavaScript wyrażenie, więc warunkowe renderowanie to zwykły JS używany wewnątrz { }.
jsx
() {
(
);
}
JSX może renderować każde JavaScript wyrażenie, więc warunkowe renderowanie to zwykły JS używany wewnątrz { }.
() {
(
);
}
cond && <X/> — renderuje <X/> gdy cond jest truthy, inaczej nic. Świetne do "pokaż lub ukryj".cond ? <A/> : <B/> — wybierz między dwiema gałęziami.null aby w ogóle nic nie renderować.&& z liczbami{count && <Badge n={count} />} // ❌ when count === 0, React renders "0" on screen!
{count > 0 && <Badge n={count} />} // ✅ guard with a real boolean
To się dzieje, ponieważ 0 && x ocenia się na 0, a React renderuje liczbę 0 (ale nie false/null/undefined).
Kiedy logika staje się złożona, oblicz element przed returnem dla czytelności:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
To utrzymuje JSX płaski i logikę decyzji jasną.
Biblioteka pytań rekrutacyjnych IT ze szczegółowymi odpowiedziami — od Juniora do Seniora.
Wesprzyj