Reactガイドを読んでいくその186

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

DOM 要素

属性についての差異

style

CSSではなくキャメルケースプロパティを持ったJavaScriptオブジェクトを受け取る。
JavaScriptのDOMのstyleプロパティと一貫性がある。
こういった作りにすることで効率的でXSS攻撃の対象となってい舞うようなセキュリティホールを防ぐことができる。

ベンダープレフィックスの自動追加は行われないので古いブラウザのサポートを考える場合は対応するスタイルのプロパティを付与してあげる必要がある。

例

const divStyle = {
  WebkitTransition: 'all', // ここでは大文字の 'W' です
  msTransition: 'all' // 'ms' は小文字である必要がある唯一のベンダープレフィックスです
};

function ComponentWithTransition() {
  return <div style={divStyle}>This should work cross-browser</div>;
}

Reactはインラインスタイルでの特定の数値プロパティに対してはpxサフィックスを自動で付与する。
px以外を使いたい場合は明示的に自身で付与することで好きな単位を使える。

全てのスタイルがピクセル指定になるのではなく、zoom、order、flexといったプロパティは単位がない状態になる。
単位がない物の一覧はここにある。

github.com

今日はここまで。