React学習ログ No.10

React公式ドキュメント学習メモ：条件付きレンダー

Reactコンポーネントで条件によって表示を切り替える際の、主要な4つの手法を比較

【共通タスク】 isVip が true の場合、名前に 👑 を追加

最小コードでの比較

1. if と return (早期リターン)

function UserCard({ name, isVip }) {
  // isVipなら、もうここで終わり
  if (isVip) {
    return <p>{name} 👑</p>;
  }
  // isVipでない場合のデフォルト
  return <p>{name}</p>;
}

2. 三項演算子 (? :)

function UserCard({ name, isVip }) {
  return (
    <p>
      {/* 👑を含めるか、含めないかの2択 */}
      {isVip ? `${name} 👑` : name}
    </p>
  );
}

3. 論理 AND (&&)

function UserCard({ name, isVip }) {
  return (
    <p>
      {name}
      {/* isVipのときだけ ' 👑' を追加 */}
      {isVip && ' 👑'}
    </p>
  );
}

4. if と変数

function UserCard({ name, isVip }) {
  let icon = ''; // まず空で宣言
  // 条件が満たされたら変数に値をセット
  if (isVip) {
    icon = ' 👑';
  }
  // 最終的なJSXで変数を使う
  return <p>{name}{icon}</p>;
}