Reactに挑戦してみる 14

概要

Reactに挑戦してみる14。

参考書籍

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

ネームスペースコンポーネント

参考書籍より引用

NamespacedComponents: コンポーネントごとに名前空間を定義して、サブコンポーネントはメインのコンポーネント内の名前空> 間に閉じ込めることで、同名のコンポーネント間での干渉を防ぐことができる

var tableColums = ['名前', '地域', '番号'];

var tableData = [
    {id: 1, name: '山田太郎', area: '東京都港区', number: '8513321'},
    {id: 2, name: '鈴木次郎', area: '神奈川県横浜市', number: '1234567'},
    {id: 3, name: '田中さん', area: '宮崎県宮崎郡', number: '9898888'}
];

// ここで親となるコンポーネントを設定している
var ContactTable = React.createClass({
    render: function(){
        return(<table>
//　親の中では、this.props.children によって子のコンポーネントを配置する
            {this.props.children}
        </table>);
    }
});

// 子のコンポーネント Headerをセットする
ContactTable.Header = React.createClass({
    render: function(){
        var tableTitles = this.props.title.map(function(cName, i){
            return (<th key={i}>
                {cName}
            </th>);
        });
        return (<thead>
            <tr>
                {tableTitles}
            </tr>
        </thead>);
    }
});

// 子のコンポーネントbodyをセットする
ContactTable.Body = React.createClass({
    render: function(){
        var tableRows = this.props.data.map(function(person){
            return (<tr key={person.id}>
                <td>{person.name}</td>
                <td>{person.area}</td>
                <td>{person.number}</td>
            </tr>);
        });
        return (<tbody>
            {tableRows}
        </tbody>);
    }
});

// ContactTableの親と子を配置する。
var DispTable = React.createClass({
    render: function(){
        return (<ContactTable className="regularTable">
            <ContactTable.Header title={this.props.title}/>
            <ContactTable.Body data={this.props.data}/>
        </ContactTable>);
    }
});

ReactDOM.render(
    <DispTable title={tableColums} data={tableData} />,
    document.getElementById('content')
);

だんだんオプジェクト指向ぽくなってきたなぁ。こっちの方がわかりやすい気がする。