JSX kan gengive ethvert JavaScript udtryk, så betinget gengivelse er blot normal JS brugt inden for { }.
jsx
() {
(
);
}
JSX kan gengive ethvert JavaScript udtryk, så betinget gengivelse er blot normal JS brugt inden for { }.
() {
(
);
}
cond && <X/> — gengiv <X/> når cond er sand, ellers ingenting. Fantastisk til "vis eller skjul".cond ? <A/> : <B/> — vælg mellem to grene.null for ikke at gengive noget overhovedet.&& med tal{count && <Badge n={count} />} // ❌ when count === 0, React renders "0" on screen!
{count > 0 && <Badge n={count} />} // ✅ guard with a real boolean
Dette sker fordi 0 && x evalueres til 0, og React gengiver tallet 0 (men ikke false/null/undefined).
Når logikken bliver kompleks, beregn elementet før return for læselighed:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
Dette holder JSX flad og beslutningslogikken klar.
Et bibliotek af IT-interviewspørgsmål med detaljerede svar — fra Junior til Senior.
Donér