skillhub-088-vercel-react-best-practices/rules/rendering-conditional-render.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Use Explicit Conditional Rendering	LOW	prevents rendering 0 or NaN	rendering, conditional, jsx, falsy-values

使用显式条件渲染

对于可能为 0、NaN 或其他假值（falsy values）的条件，应使用显式三元运算符（? :）替代 && 进行条件渲染，以避免这些假值被意外渲染出来。

错误写法（当 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>