在 React 中，JSX 支持哪些内联条件渲染的写法？请结合示例代码说明每种方式的适用场景。
考察说明
考查 React 面试者对 JSX 内联条件渲染常见写法的掌握程度，能否结合场景选择合适的方案。
回答思路
- 【回答框架 1】JSX 本身不支持 if/else 语句，但可以通过逻辑与运算符、三元运算符、逻辑或运算符以及 IIFE（立即执行函数）等方式实现内联条件渲染。
- 【回答框架 2】逻辑与运算符适合渲染单一条件为真时的内容，例如 {condition && <div>已登录</div>}，当 condition 为 false 时，React 不会渲染该元素。
- 【回答框架 3】三元运算符适合处理二选一的情况，例如 {isLoggedIn ? <UserGreeting /> : <GuestGreeting />}，可以清晰表达两种分支。
- 【回答框架 4】当条件分支较多时，可以考虑使用 IIFE 或提取独立的渲染函数，例如 {(() => { if (status === 'loading') return <Loading />; else if (status === 'error') return <Error />; else return <Success />; })()}，但注意可读性。
- 【回答框架 5】此外，避免在 JSX 中执行过重的逻辑，复杂条件建议提取为变量或函数，保持 JSX 简洁可维护。
- 【关键点 1】逻辑与运算符 {condition && <Component />} 适用于条件为真时渲染，为假时渲染 false，但注意避免渲染 0。
- 【关键点 2】三元运算符 {cond ? <A /> : <B />} 适用于二选一的渲染。
- 【关键点 3】逻辑或 {condition || <Fallback />} 可用于提供默认内容。
- 【关键点 4】复杂条件建议提取为变量或函数，提升可读性。
- 【易错点 1】使用 && 时，如果条件为 0 或 NaN 等 falsy 值，React 会渲染该数字，导致意外显示，需注意条件表达式的结果应为布尔值。
- 【易错点 2】三元运算符嵌套过深会降低可读性，应避免。
- 【易错点 3】避免在 JSX 中书写复杂逻辑，应提取为函数或变量。