---
title: Use Explicit Conditional Rendering
impact: LOW
impactDescription: prevents rendering 0 or NaN
tags: rendering, conditional, jsx, falsy-values
---
## 使用显式条件渲染
对于可能为 `0`、`NaN` 或其他假值（falsy values）的条件，应使用显式三元运算符（`? :`）替代 `&&` 进行条件渲染，以避免这些假值被意外渲染出来。
**错误写法（当 count 为 0 时会渲染出 "0"）：**
```tsx
function Badge({ count }: { count: number }) {
return (
{count && {count}}
)
}
// 当 count = 0 时，渲染为：0
// 当 count = 5 时，渲染为：5
```
**正确写法（当 count 为 0 时不渲染任何内容）：**
```tsx
function Badge({ count }: { count: number }) {
return (
{count > 0 ? {count} : null}
)
}
// 当 count = 0 时，渲染为：
// 当 count = 5 时，渲染为：5
```