react+列表循環+table單元格合並(簡單的例子)

效果如下:

import React, {Component} from 'react'

const dataSource = [
    {
        name: '干細胞轉化研究',
        list: [
            {
                area: '和平區',
                pNum: 1,
                jNum: 1,
                cost: 2448,
                yCost: 1948
            },
            {
                area: '南開區',
                pNum: 1,
                jNum: 0,
                cost: 0,
                yCost: 0
            }
        ]
    },
    {
        name: '納米科技',
        list: [
            {
                area: '南開區',
                pNum: 1,
                jNum: 1,
                cost: 389,
                yCost: 289
            },
            {
                area: '津南區',
                pNum: 1,
                jNum: 1,
                cost: 333,
                yCost: 333
            }
        ]
    },
    {
        name: '量子調控與量子信息',
        list: [
            {
                area: '天津市',
                pNum: 1,
                jNum: 1,
                cost: 489,
                yCost: 489
            }
        ]
    },
    {
        name: '蛋白質機器與生命過程調控',
        list: [
            {
                area: '南開區',
                pNum: 1,
                jNum: 1,
                cost: 2392,
                yCost: 2392
            }
        ]
    },
    {
        name: '全球變化及應對',
        list: [
            {
                area: '0',
                pNum: 0,
                jNum: 0,
                cost: 0,
                yCost: 0
            }
        ]
    },
    {
        name: '變革性技術關鍵科學問題',
        list: [
            {
                area: '天津市',
                pNum: 3,
                jNum: 3,
                cost: 4036,
                yCost: 4036
            },
            {
                area: '南開區',
                pNum: 1,
                jNum: 1,
                cost: 926,
                yCost: 926
            }
        ]
    },
    {
        name: '發育編程及其代謝調節',
        list: [
            {
                area: '天津市',
                pNum: 1,
                jNum: 1,
                cost: 2429,
                yCost: 2429
            }
        ]
    }
];

const TableColGroup = () => {
    return (
        <colgroup>
            <col style={{width: '50px'}}/>
        </colgroup>
    )
};
const TableBodyTrTemplate = (prop) => {
    const {item, index} = prop;
    return (
        <tr>
            <td rowSpan={item.list.length}>{index + 1}</td>
            <td rowSpan={item.list.length}>{item.name}</td>
            <td>{item.list[0].area}</td>
            <td>{item.list[0].pNum}</td>
        </tr>
    )
};
```js
const TableBodyTrTemplate2 = (prop) => {
    const {item, index} = prop;
    if (item.list.length === 0) return null;
    return item.list.slice(1, item.list.length).map((son, index_) => {
        return (
            <tr key={index_ + 'index_'}>
                <td>{son.area}</td>
                <td>{son.pNum}</td>
            </tr>
        )
    })
};

class DetailChartTable extends Component {
    constructor() {
        super();
        this.state = {
            list: dataSource
        }
    }

    render() {
        const {list} = this.state;
        return (
            <div className='DetailChartTable customTable'>
                <div className='tableHeader'>
                    <table cellPadding='0' cellSpacing='0'>
                        <TableColGroup/>
                        <thead>
                        <tr>
                            <th>序號</th>
                            <th>名稱</th>
                            <th>地區</th>
                            <th>項目種樹</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div className='tableBody'>
                    <table cellPadding='0' cellSpacing='0'>
                        <TableColGroup/>
                        <tbody>
                        {
                            list.map((item, index) => {
                                return (
                                    [
                                        <TableBodyTrTemplate item={item} index={index} key={'1-index-' + index}/>,
                                        <TableBodyTrTemplate2 item={item} index={index} key={'2-index-' + index}/>
                                    ]
                                )
                            })
                        }
                        </tbody>
                    </table>
                </div>
            </div>
        )
    }
}

export default DetailChartTable