JSX peut rendre n'importe quelle expression JavaScript, donc le rendu conditionnel est simplement du JS normal utilisé à l'intérieur de { }.
jsx
() {
(
);
}
JSX peut rendre n'importe quelle expression JavaScript, donc le rendu conditionnel est simplement du JS normal utilisé à l'intérieur de { }.
() {
(
);
}
cond && <X/> — rendez <X/> quand cond est vrai, sinon rien. Parfait pour « afficher ou masquer ».cond ? <A/> : <B/> — choisissez entre deux branches.null pour ne rien rendre du tout.&& avec des nombres{count && <Badge n={count} />} // ❌ when count === 0, React renders "0" on screen!
{count > 0 && <Badge n={count} />} // ✅ guard with a real boolean
Cela se produit parce que 0 && x s'évalue à 0, et React rend le nombre 0 (mais pas false/null/undefined).
Quand la logique devient complexe, calculez l'élément avant le return pour la lisibilité :
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
Cela maintient JSX plat et la logique de décision claire.