出し分け(三項)
2択のときは三項演算子
前のレッスンの && は「出すか、出さないか」でした。今回は「公開中」か「非公開」か、どちらかを必ず出す2択です。この形は三項演算子で書きます。
JavaScript (JSX)
<span>{work.published ? "公開中" : "非公開"}</span>条件 ? 真のときの値 : 偽のときの値 で、結果は必ずどちらか1つの値になります。式なので JSX の波かっこにそのまま置けます。
文字だけでなく JSX も返せる
三項演算子が返せるのは文字列だけではありません。JSX を返せば、見た目ごと切り替わります。
JavaScript (JSX)
{work.published
? <a href={work.url}>作品を見る</a>
: <p>準備中です</p>}属性の値にも使える
出し分けたいのが中身ではなく class 名のこともあります。className の中身も式なので、同じ書き方が通ります。
JavaScript (JSX)
<span className={work.published ? "label-public" : "label-private"}>
{work.published ? "公開中" : "非公開"}
</span>これで文字と見た目の両方が状態に合わせて変わります。CSS 側で .label-public を緑、.label-private を灰色にしておけば、コンポーネントのほうは何も足さずに色が付きます。
つまずきどころ
三項演算子を入れ子にすると、とたんに読めなくなります。
JavaScript (JSX)
{a ? "A" : b ? "B" : "C"}2段までなら我慢できますが、3段を超えたら三項演算子をやめる合図です。return の前に普通の if 文で変数を組み立て、JSX では変数を出すほうが読みやすくなります。JSX の中で if が書けないだけで、コンポーネントの本体では自由に if を書けます。
もう1つ、&& と三項演算子の使い分けも覚えておきます。片方のときだけ出すなら &&、どちらかを必ず出すなら三項演算子です。条件 ? <Badge /> : null と書けなくはありませんが、それは && で書くほうが短く読めます。
演習
作品カードに、公開中と非公開のラベルを出し分けて付けます。