mcpField
R
rendering-conditional-render

rendering-conditional-render

github.com/theorcdev开发2.1k36 次安装2 天前更新
代码仓库

关于 rendering-conditional-render

这项 React 渲染技能建议在条件可能为 `0` 或 `NaN` 等值时使用显式三元表达式，而不是 `&&`，以免意外显示假值。

主要功能

  1. 01使用三元表达式进行条件渲染
  2. 02显式处理 0 和 NaN 条件

适用场景

  1. 01计数为零时隐藏徽标
  2. 02避免界面显示意外的假值

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/theorcdev/8bitcn-ui --skill rendering-conditional-render

安装后在 Claude Code 中输入/rendering-conditional-render确认已加载。

详细介绍

使用显式条件渲染

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

不正确（当 count 为 0 时会渲染“0”）：

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

// When count = 0, renders: <div>0</div>
// When count = 5, renders: <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>
  )
}

// When count = 0, renders: <div></div>
// When count = 5, renders: <div><span class="badge">5</span></div>

评论

支持 Markdown