三元运算符本身不切换状态，而是根据条件返回两值之一；需配合变量赋值实现切换，如 isActive = isActive ? false : true 或封装为 toggle(value, a, b) 函数。
三元运算符（? :）本身不直接“切换状态”，而是根据条件返回两个值中的一个。要实现简单状态切换（比如在 true 和 false 之间翻转），需配合当前状态变量使用，核心是：用当前值决定下一个值。
基础写法：基于布尔值的翻转
最常见的是切换布尔状态，例如 isActive：
let isActive = true; isActive = isActive ? false : true; // 切换为相反值 // 或更简洁地写成： isActive = !isActive;
虽然 !isActive 更简短，但若需切换为**非布尔的两种不同值**（如字符串、数字），三元就不可替代：
status = status === 'open' ? 'closed' : 'open';theme = theme === 'light' ? 'dark' : 'light';-
count = count === 0 ? 1 : 0;（在 0 和 1 间切换）
在函数中封装切换逻辑
避免重复写三元表达式，可封装成可复用函数：
立即学习“Java免费学习笔记（深入）”；
const toggle = (value, a, b) => value === a ? b : a; let mode = 'edit'; mode = toggle(mode, 'edit', 'view'); // → 'view' mode = toggle(mode, 'edit', 'view'); // → 'edit'
这个函数适用于任意两个可比较的值（字符串、数字、甚至 null），只要能用 === 判断。
在 React 等框架中结合 setState 使用
实际开发中常用于事件处理，比如点击按钮切换 UI 状态：
function MyComponent() {
const [isExpanded, setIsExpanded] = useState(false);
return (
<button onClick={() => setIsExpanded(prev => !prev)}>
{isExpanded ? '收起' : '展开'}
</button>
);
}
注意：这里用了函数式更新 setIsExpanded(prev => !prev)，确保获取到最新状态；显示文案也用三元动态渲染，保持一致性。
注意事项：别混淆“判断”和“切换”
三元运算符是表达式，不是语句。它不会自动修改原变量，必须显式赋值：
- ✅ 正确：
isActive = isActive ? false : true; - ❌ 错误：
isActive ? false : true;（只是计算，没保存结果） - ⚠️ 避免嵌套过深：
a ? (b ? 'x' : 'y') : (c ? 'z' : 'w')建议拆成 if 或提取逻辑
三元适合简单二选一场景。状态逻辑变复杂时，优先考虑 if-else 或查找表（Map/Object），保证可读性。
