かずきのBlog@hatena

日本マイクロソフトに勤めています。このブログは個人ブログなので、ここに書いている内容は個人的な意見で会社の公式見解ではない点にご注意ください。好きなものは XAML と C# 。苦手なものは型の無い言語です。

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が表示されます。