wehub-skill-sync
41 lines
1.0 KiB
Markdown
41 lines
1.0 KiB
Markdown
---
|
|
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 (
|
|
<div>
|
|
{count && <span className="badge">{count}</span>}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// 当 count = 0 时，渲染为：<div>0</div>
|
|
// 当 count = 5 时，渲染为：<div><span class="badge">5</span></div>
|
|
```
|
|
|
|
**正确写法（当 count 为 0 时不渲染任何内容）：**
|
|
|
|
```tsx
|
|
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>
|
|
```
|