React入門 練習問題 17:JSX:属性の命名規則
ReactのJSXで、HTML要素にCSSクラスを指定する際に使用する正しい属性名はどれか。
- class
- className
- classId
- htmlClass
- classFor
正解と解説を見る
正解:className
JSXではJavaScriptの予約語との衝突を避けるため、CSSクラスの指定にはclassNameという属性名を使用する。
【正解の理由】
JSXは最終的にJavaScriptの関数呼び出しに変換されるため、JavaScriptの予約語である「class」(クラス定義に使う構文)をそのまま属性名として使うことができない。そのためReactでは代わりに「className」という専用の属性名を用意しており、レンダリング時に実際のDOM要素のclass属性へと変換される。
【不正解の理由】
• 「class」:JavaScriptの予約語と衝突するため、JSXの属性名としては使用できない
• 「classId」:Reactで定義されている実際の属性名ではなく、架空の名称である
• 「htmlClass」:Reactで定義されている実際の属性名ではなく、架空の名称である
• 「classFor」:Reactで定義されている実際の属性名ではなく、架空の名称である