react如果你想為一個元件返回多個元素怎麼辦？

Cymiran發表於2018-06-08
React元件

react中元件一般都是隻返回一個父節點包含的元素，而我們有時候就是想返回多個元素怎麼辦，當然react團隊也幫你想到了，兩種方式：1，以陣列的形式返回；2，建立React片段

例如，你想這樣…遍歷tbody然後在遍歷td，輸出這種格式

<table>
    <thead>
        <th>name</th>
        <th>age</th>
        <th>score</th>
    </thead>
    <tbody>
        <tr>
            <td>Alice</td>
            <td>18</td>
            <td>100</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>18</td>
            <td>100</td>
        </tr>
    </tbody>
</table>

開始你這樣寫…

<table>
    <thead>
        <th>name</th>
        <th>age</th>
        <th>score</th>
    </thead>
    <tbody>
        {this.renderRow()}
    </tbody>
</table>

/************/

renderRow = () => {
    this.state.dataList.map((item, i) => {
        return (
            <tr key={i}>
                <td>{item.name}</td>
                <td>{item.age}</td>
                <td>{item.score}</td>
            </tr>
        )
    })
}

// 結果就是報錯 ...react元件只允許返回一個父節點哦...

方法一： 以陣列形式返回

renderRow = () => {
    this.state.dataList.map((item, i) => {
        return [
            <tr key={i}>
                <td>{item.name}</td>
                <td>{item.age}</td>
                <td>{item.score}</td>
            </tr>
        ]
    })
}   

// 對就這樣，將物件格式的元素 改成陣列格式 吼吼吼.... 或者你可以宣告一個陣列 直接返回，當然一樣嘍

方法二： 建立react片段，可以讓你將元素列表加到一個分組中，而且不會增加額外的節點元素

renderRow = () => {
    this.state.dataList.map((item, i) => {
        return (
            <React.Fragment>
                <tr key={i}>
                    <td>{item.name}</td>
                    <td>{item.age}</td>
                    <td>{item.score}</td>
                </tr>
            </React.Fragment>
        )
    })
}


後續react團隊還會對React.Fragment做進一步的更新，我們也任重而道遠，將上下而求索...

相關文章