属性での波括弧の使用
CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 8/42。
波括弧は属性でも機能します。引用符を波括弧に置き換えると、属性値は JavaScript から取得されます：
const level = 'warning';
return <p className={level}>Check this!</p>;これで段落のクラスは変数に保持されている値と同じになります。level を 'error' に変更すると、クラスもそれに追従します。これがReactアプリがデータに基づいてスタイルを切り替える仕組みです。
構文に注意してください：className={level} のように、波括弧の周りに引用符はありません。className="{level}"（引用符あり）と書くと、クラスにはリテラル文字列の {level} が設定されてしまいます。
チャレンジ
簡単アラートの段落は、CSS クラスを level 変数から取得する必要があります。
- 波括弧を使用して、段落の
classNameにlevelの値を設定します (クラスは最終的にwarningになる必要があります)。 - 属性の中に warning という単語を直接入力しないでください。変数を使用します。
自分で試してみよう
<!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>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。