読者です 読者をやめる 読者になる 読者になる

かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

Visual Studio上のTypeScript JSXを使ってReact.js「style属性をJSのオブジェクトで指定する」

ということができるみたいですね。

fontSize → font-sizeみたいな感じのルールでJSのオブジェクトのプロパティをCSSのstyleの名前に変換してくれるみたいです。こんな感じで

/// <reference path="typings/tsd.d.ts" />

var h2Style = {
    fontSize: 40,
    color: 'red',
    backgroundColor: 'yellow'
};

ReactDOM.render(
    <h2 style={h2Style}>Hello world</h2>,
    document.getElementById('content'));

これで背景黄色で文字が赤のHello worldが表示されます。