2017-04-09

React.js開發入門教學(9)-分解與組合

其實我們不難發現在寫React很像在寫物件導向語言的感覺。感覺很像在寫物件然後再把物件

放到某個地方執行。那如果是這樣，一個東西本身可以由多個物件組合而成嗎？答案是可以的

一個 Component 可以是由多個 Component 組合而成。我在書上看到一個很好的例子可以

來示範這個。就是用 table ！因為HTML5中所規範的 table 有表頭、內容與表尾。那我

們就利用這樣的結構來實做看看。首先先做個完全靜態的表格！

class Table_1 extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    render() {
        return (
            <table>
                <thead>
                    <tr>
                        <td>title</td>
                        <td>title</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>body</td>
                        <td>body</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>foot</td>
                        <td>foot</td>
                    </tr>
                </tfoot>
            </table>
        )
    }
}

ReactDOM.render(
    <Table_1 />,
    document.getElementById('test')
)

接著我們把它拆成三個部分再組合起來，這樣也許你有兩三個表格用了相同的表頭與表尾時就可以

達到重複利用的效果！程式碼如下

class Table_header extends React.Component {
    render() {
        return (
            <thead>
                <tr>
                    <td>title</td>
                    <td>title</td>
                </tr>
            </thead>
        )
    }
}
//表格1的內容
class Table_body_1 extends React.Component {
    render() {
        return (
            <tbody>
                <tr>
                    <td>body</td>
                    <td>body</td>
                </tr>
            </tbody>
        )
    }
}
//表格2的內容
class Table_body_2 extends React.Component {
    render() {
        return (
            <tbody>
                <tr>
                    <td>body2</td>
                    <td>body2</td>
                </tr>
            </tbody>
        )
    }
}
class Table_footer extends React.Component {
    render() {
        return (
            <tfoot>
                <tr>
                    <td>foot</td>
                    <td>foot</td>
                </tr>
            </tfoot>
        )
    }
}
class Table_1 extends React.Component {
    render() {
        return (
            <table>
                <Table_header />
                <Table_body_1 />
                <Table_footer />
            </table>
        )
    }
}
class Table_2 extends React.Component {
    render() {
        return (
            <table>
                <Table_header />
                <Table_body_2 />
                <Table_footer />
            </table>
        )
    }
}

ReactDOM.render(
    <div><Table_1 /><Table_2 /></div>,  //這裡要特別注意，記得用DIV標籤包起來喔！
    document.getElementById('test')
)

React