JSX kann jeden JavaScript Ausdruck rendern, daher ist bedingtes Rendern nur normales JS, das in { } verwendet wird.
jsx
() {
(
);
}
JSX kann jeden JavaScript Ausdruck rendern, daher ist bedingtes Rendern nur normales JS, das in { } verwendet wird.
() {
(
);
}
Eine Sammlung von IT-Interviewfragen mit ausführlichen Antworten — vom Junior bis zum Senior.
Spendencond && <X/> — rendert <X/> wenn cond wahr ist, sonst nichts. Perfekt für "anzeigen oder verstecken".cond ? <A/> : <B/> — wähle zwischen zwei Zweigen.null zurück, um überhaupt nichts zu rendern.&& mit Zahlen{count && <Badge n={count} />} // ❌ when count === 0, React renders "0" on screen!
{count > 0 && <Badge n={count} />} // ✅ guard with a real boolean
Das passiert, weil 0 && x zu 0 ausgewertet wird, und React die Zahl 0 rendert (aber nicht false/null/undefined).
Wenn die Logik komplex wird, berechne das Element vor dem Return für bessere Lesbarkeit:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
Das hält JSX flach und die Entscheidungslogik klar.