表达式与条件渲染
JSX 中 { } 内可以放任何 JS 表达式，但不能直接写 if/for 语句——这是初学者最容易踩的坑。条件渲染的固定套路：&& 做开关、三元表达式做二选一、把复杂分支抽成函数或提前 return。
渲染 false、null、undefined 时什么都不显示，因此 {count > 0 && <p>有</p>} 是最常用的“有才显示”写法。注意 {0 && ...} 会渲染出数字 0——做判断时显式转布尔。
- { } 里放表达式（变量、三元、函数调用），不能放 if/for 语句
- && 用于“真才显示”，三元用于“二选一”，多分支用函数 + 提前 return
- false / null / undefined 不渲染，但 0 和空字符串会
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>条件渲染</title> <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> const { useState } = React; function App() { const [logined, setLogined] = useState(false); const [role, setRole] = useState('guest'); const [count, setCount] = useState(0); // 复杂判断：抽成函数，内部随便写 if 语句 function desc() { if (role === 'admin') return '管理员：什么都能看'; if (role === 'vip') return 'VIP：能看会员内容'; return '游客：只能看公开内容'; } return ( <div style={{ padding: 16 }}> {/* 三元：二选一 */} {logined ? <button onClick={() => setLogined(false)}>退出登录</button> : <button onClick={() => setLogined(true)}>去登录</button>} <p>角色：{role}</p> <select value={role} onChange={e => setRole(e.target.value)}> <option value="guest">游客</option> <option value="vip">VIP</option> <option value="admin">管理员</option> </select> {/* && 开关 */} {logined && <p>✅ 欢迎回来，{desc()}</p>} {/* 经典翻车现场：0 会显示出来 */} <button onClick={() => setCount(count - 1)}>-1</button> {count > 0 && <p>有 {count} 条新消息</p>} {count <= 0 && <p>没有新消息</p>} </div> ); } ReactDOM.createRoot(document.getElementById('root')).render(<App />); </script> </body> </html>
本节要点条件渲染三件套：&& 开关、三元二选一、复杂逻辑抽函数提前 return；小心 0 被渲染。
