JSX 可以渲染任意 JavaScript 表达式，因此条件渲染只是在 { } 中使用普通的 JS。
jsx
() {
(
);
}
cond && <X/> —— 当 cond 为真值时渲染 <X/>，否则什么都不渲染。非常适合「显示或隐藏」。cond ? <A/> : <B/> —— 在两个分支之间做选择。null 表示什么都不渲染。&&{count && <Badge n={count} />} // ❌ when count === 0, React renders "0" on screen!
{count > 0 && <Badge n={count} />} // ✅ guard with a real boolean
这是因为 0 && x 求值结果为 0，而 React 会渲染数字 0（但不会渲染 false/null/undefined）。
当逻辑变得复杂时，为了可读性，应在 return 之前计算出元素：
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
这样可以让 JSX 保持扁平，决策逻辑也更清晰。