Visual Studio上のTypeScript JSXを使ってReact.js「createFactory」

同じ名前のタグを沢山組み立てるときに楽ができるReact.createFactoryという関数があるみたい。こんな感じで、liタグを沢山作るときにあらかじめliタグを作るファクトリを定義することができる。

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

var h1 = React.createElement('h1', { className: 'header' }, 'React!!');
var liFactory = React.createFactory('li');
var items =
    [
        liFactory({ className: 'item' }, 'item1'),
        liFactory({ className: 'item' }, 'item2'),
        liFactory({ className: 'item' }, 'item3'),
        liFactory({ className: 'item' }, 'item4')
    ];
var ul = React.createElement('ul', { className: 'list' }, items);

var section = React.createElement('section', { className: 'container' }, h1, ul);

ReactDOM.render(section, document.getElementById('content'));

これで、こんな感じのHTMLが生成された。

<sectionclass="container"data-reactid=".0"><h1class="header"data-reactid=".0.0">React!!</h1><ulclass="list"data-reactid=".0.1"><liclass="item"data-reactid=".0.1.0">item1</li><liclass="item"data-reactid=".0.1.1">item2</li><liclass="item"data-reactid=".0.1.2">item3</li><liclass="item"data-reactid=".0.1.3">item4</li></ul></section>