条件渲染技巧：使用三元运算符Skill rendering-conditional-render

---

name: 条件渲染-条件渲染 description: 使用显式三元运算符代替 && 进行条件渲染。当渲染可能为 0、NaN 或其他可能意外渲染的假值时应用。

使用显式条件渲染

当条件可能为 0、NaN 或其他可能渲染的假值时，使用显式三元运算符 (? :) 而不是 && 进行条件渲染。

错误（当 count 为 0 时渲染 “0”）：

function Badge({ count }: { count: number }) {
  return (
    <div>
      {count && <span className="badge">{count}</span>}
    </div>
  )
}

// 当 count = 0 时，渲染: <div>0</div>
// 当 count = 5 时，渲染: <div><span class="badge">5</span></div>

正确（当 count 为 0 时渲染空内容）：

function Badge({ count }: { count: number }) {
  return (
    <div>
      {count > 0 ? <span className="badge">{count}</span> : null}
    </div>
  )
}

// 当 count = 0 时，渲染: <div></div>
// 当 count = 5 时，渲染: <div><span class="badge">5</span></div>