かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

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