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作进一步的更新，咱们也任重而道远，将上下而求索...