React入門 練習問題 23：JSXのインラインスタイル記法
ReactのJSXでインラインスタイルを指定する際の正しい記法はどれか。
- style={{ color: 'red', fontSize: '16px' }} のようにオブジェクトで渡す
- style="color: red; font-size: 16px;" のように文字列で渡す
- css={{ color: 'red', fontSize: '16px' }} のようにcss属性を使う
- style=[color: 'red', fontSize: '16px'] のように配列で渡す
- styles="color:red;font-size:16px" のようにstyles属性を使う
正解と解説を見る
正解：style={{ color: 'red', fontSize: '16px' }} のようにオブジェクトで渡す
ReactのJSXでは、style属性にはHTMLのような文字列ではなく、キャメルケースのプロパティ名を持つJavaScriptオブジェクトを渡す必要があります。
【正解の理由】
style属性にはオブジェクトを渡す必要があり、二重波括弧の外側の{}はJSX式の埋め込み、内側の{}がオブジェクトリテラルを表します。プロパティ名はfont-sizeではなくfontSizeのようにキャメルケースで記述します。
【不正解の理由】
• 「文字列で渡す」：これはHTMLの書き方であり、JSXのstyle属性では動作しない
• 「css属性を使う」：Reactの標準的な仕組みにcss属性は存在しない
• 「配列で渡す」：style属性はオブジェクトを期待しており、配列を渡すとエラーになる
• 「styles属性を使う」：Reactの標準属性名はstyleであり、stylesという属性は存在しない