インラインのstyle

Reactでは、インラインのstyleは文字列として指定されません。 代わりオブジェクトとして指定され、キーはstyle名がキャメルケース形式にされたもので、 値はstyleの値になり、通常は文字列になります。(詳細は後述)

var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all', // 大文字の'W'で始まることに注意
  msTransition: 'all'      // 'ms'は唯一小文字で始まるベンダープレフィックス
};

React.render(<div style={divStyle}>Hello World!</div>, mountNode);

styleのキーは、JavaScriptからDOMノード上のプロパティへアクセスするものと一致させるためにキャメルケース形式にされています (例: node.style.backgroundImage)。 ms以外のベンダープレフィックスは大文字で始まる必要があります。 WebkitTransitionが大文字の"W"で始まるのはこのためです。

 Back to top

© 2013-2017 Facebook Inc.
Documentation licensed under CC BY 4.0.

このページは、ページトップのリンク先のReact内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • ドキュメントの情報が古い可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。