mcpField
R
rendering-conditional-render

rendering-conditional-render

github.com/theorcdev開発2.1k36 回インストール2 日前に更新
リポジトリ

rendering-conditional-render について

React のレンダリングに関するスキルで、条件が `0` や `NaN` などになり得る場合は、`&&` ではなく明示的な三項演算子を使います。意図しない値の表示を防ぎます。

主な機能

  1. 01条件付きレンダリングに三項演算子を使用
  2. 020 と NaN の条件を明示的に処理

活用シーン

  1. 01件数がゼロのときバッジを非表示
  2. 02意図しない値の UI 表示を防止

インストール

コマンドをコピーしてターミナルで実行します。

$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 対応