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