条件渲染

1. 一句话概括主题

条件渲染就是根据状态或条件,决定当前这次渲染到底输出什么 UI。

2. 常见写法

  • if / else:适合分支明显、逻辑较长的场景
  • 三元表达式:适合在 JSX 中直接切换两种结果
  • 逻辑与 &&:适合“满足条件才显示”
  • 提前返回:适合组件一开始就要拦截空态或异常态

3. 使用建议

  • 分支复杂时优先把判断移到 JSX 外部
  • 避免多层三元表达式嵌套
  • 对空数组、空字符串、数字 0 的渲染结果要有明确预期

4. 相关主题