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

Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

Reactに挑戦してみる 13

概要

Reactに挑戦してみる13。

参考書籍

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

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

コンポーネント間の機能の共有~ マルチコンポーネント

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

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

// table header コンポーネント
var TableHeader = React.createClass({
    render: function(){
// titleプロパティのmapメソッドを定義して展開する。
        var tableTitles = this.props.title.map(function(cName, i) {
            return (<th key={i}>
                {cName}
                </th>);
        });
        return (<thead>
            <tr>
                {tableTitles}
            </tr>
        </thead>);
    }
});

// table body コンポーネント
var TableBody = React.createClass({
    render: function() {
// dataプロパティのmapメソッドを定義して展開する。
        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>);
    }
});

// 表全体を描くDispTableコンポーネント
// 
var DispTable = React.createClass({
    render: function(){
        return (<table className="regularTable">
// titleプロパティ、dataプロパティを、それれぞれtitle, dataという名前のプロパティで、それぞれのコンポーネントに代入する。
            <TableHeader title={this.props.title}/>
            <TableBody data={this.props.data}/>
        </table>);
    }
});

// DispTableにtableColums、tableDataをtitle, dataという名前のプロパティとして代入する。
ReactDOM.render(
    <DispTable title={tableColums} data={tableData} />,
    document.getElementById('content')
);

うーん、徐々に難しくなってきたなぁw