Reactに挑戦してみる 15

概要

Reactに挑戦してみる15。動的コンポーネントで、本格的ぽい感じ。

参考書籍

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

Mixinの利用

djangoとかのmixinと似てる気がするな。

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

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

var MonitorLifeCycleMixin = {
    componentDidMount: function(){
        console.log('componentDidMount:', this.constructor.displayName);
    },
    componentWillReceiveProps: function(nextProps) {
        console.log('componentWillReceiveProps:', nextProps);
    }
};

var ContactTable = React.createClass({
    mixins: [MonitorLifeCycleMixin],
    render: function(){
        return(<table>
            {this.props.children}
        </table>);
    }
});

ContactTable.Header = React.createClass({
    mixins: [MonitorLifeCycleMixin],
    render: function(){
        var tableTitles = this.props.title.map(function(cName, i){
            return (<th key={i}>
                {cName}
            </th>);
        });
        return (<thead>
            <tr>
                {tableTitles}
            </tr>
        </thead>);
    }
});

ContactTable.Body = React.createClass({
    mixins: [MonitorLifeCycleMixin],
    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>);
    }
});

var DispTable = React.createClass({
    mixins: [MonitorLifeCycleMixin],
    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')
);

お〜〜〜、どんどん実践に近づいてる気がする(^ ^)

プログラムスタート時点からの経過時間をミリ秒単位で計算して、表示する

mixinsを呼び出しておくと、その中のメソッドは、this.メソッド名でよびだせるぽいな。

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

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

var startTime = Date.now();

var MonitorLifeCycleMixin = {
    componentDidMount: function(){
        console.log('componentDidMount:', this.constructor.displayName);
    },
    componentWillReceiveProps: function(nextProps) {
        console.log('componentWillReceiveProps:', nextProps);
    },
    showElapsed: function(){
        console.log(this.constructor.displayName, Date.now() - startTime);
    }
};

var ContactTable = React.createClass({
    mixins: [MonitorLifeCycleMixin],
    render: function(){
        this.showElapsed();
        return(<table>
            {this.props.children}
        </table>);
    }
});

ContactTable.Header = React.createClass({
    mixins: [MonitorLifeCycleMixin],
    render: function(){
        var tableTitles = this.props.title.map(function(cName, i){
            return (<th key={i}>
                {cName}
            </th>);
        });
    this.showElapsed();
        return (<thead>
            <tr>
                {tableTitles}
            </tr>
        </thead>);
    }
});

ContactTable.Body = React.createClass({
    mixins: [MonitorLifeCycleMixin],
    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>);
        });
        this.showElapsed();
        return (<tbody>
            {tableRows}
        </tbody>);
    }
});

var DispTable = React.createClass({
    mixins: [MonitorLifeCycleMixin],
    render: function(){
        this.showElapsed();
        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')
);

でも、mixinは便利な反面、メソッド名の衝突とかが結構起こりやすいので、あんま使わない方がいいかもとのこと。