在 React 中，有哪些方法可以实现组件的条件渲染？请列举常用方式并说明各自的适用场景。

回答思路

1. 【回答框架 1】React 条件渲染基于 JavaScript 表达式，常用方法包括 if/else、三元运算符、逻辑与运算符、可选链和立即执行函数等。
2. 【回答框架 2】if/else 适合在 render 方法或函数组件内根据复杂条件返回不同 UI，代码清晰但稍显冗长。
3. 【回答框架 3】三元运算符适合简单的二选一场景，如 isLoggedIn ? <UserGreeting /> : <GuestGreeting />，可读性好。
4. 【回答框架 4】逻辑与运算符用于“满足条件才渲染”的场景，如 isShow && <Popup />，注意 0 或 NaN 等假值可能导致意外渲染。
5. 【回答框架 5】此外，还可以使用立即执行函数封装多分支逻辑，或利用条件组件封装，提升复用性。
6. 【关键点 1】if/else 适合多条件分支，代码结构化；三元适合二选一；逻辑与适合单条件控制。
7. 【关键点 2】逻辑与运算符需警惕 0 和 NaN 被渲染，应确保条件为布尔值。
8. 【关键点 3】条件渲染不会移除组件状态，卸载和挂载会重置状态。
9. 【易错点 1】直接用 && 时，若左侧为 0 或 NaN，会渲染出数字。
10. 【易错点 2】在 map 循环中直接使用条件渲染可能导致索引问题，需合理组织。
11. 【易错点 3】过度使用三元嵌套会降低可读性，应适时提取组件。