&& を使った表示
CoddyのReactジャーニー「基本概念」セクションの一部。レッスン 34/42。
多くの場合、else はありません。条件が満たされたときに何かを表示したいだけです。&& のテクニックを使えば、表示するか何も表示しないかを切り替えられます。
{unread > 0 && <span>You have {unread} new messages</span>}仕組み: && は左辺が真の場合に右辺を返し、React はそれをレンダリングします。左辺が偽の場合は何もレンダリングされません。左辺が真偽値の場合、これは : null を省略した三項演算子です:
{cond ? <X /> : null} // 以下と同じ
{cond && <X />}そのため、この例では unread > 0 を確認します。{unread && <span>...</span>} を使い、unread が 0 の場合、&& は 0 を返し、React はそれをページにレンダリングします。
チャレンジ
簡単読むものがある場合にのみ受信トレイのバッジを表示します。コンポーネントでは unread を定義しています。
&&を使って、unreadが 0 より大きい場合にのみ、id="badge"を持つ<span>とテキスト3 new messagesを表示します（数値は変数から作成してください）。
自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。