如何在地图函数中合并React TableCells？

Question

所以我试图用material-ui创建一个表，其中w1和w2的行是垂直合并的，但我似乎无法找到解决方案。当手动硬编码表时使用rowSpan工作正常，但是当我在map函数中使用它时，它会创建4列，其中包含相同元素的合并行。我需要映射数据，因为该表中会有很多行，并且对所有行进行硬编码是不合理的。

任何类型的建议来解决这个问题？

<TableBody>
    {data.data.map((row, i) => (
        <TableRow key={row.i}>
            <TableCell className={classes.fontEditable} component="th" scope="row">
                {row.x1}
            </TableCell>
            <TableCell className={classes.fontEditable} align="right">
                {row.x2}
            </TableCell>
            <TableCell rowSpan={4} className={classes.fontEditable} align="right">
                {row.w1}
            </TableCell>
            <TableCell rowSpan={4} className={classes.fontEditable} align="right">
                {row.w2}
            </TableCell>
            <TableCell className={classes.font} align="right">
                {row.t}
            </TableCell>
        </TableRow>
    ))}
</TableBody>

预期结果

实际结果

Answer 1

问题：由于map函数，它在每一行中创建了w1和w2单元格

解决方案：您可以为w1和w2打印if条件，仅执行以下操作

<TableBody>
{data.data.map((row, i) => (
    <TableRow key={row.i}>
        <TableCell className={classes.fontEditable} component="th" scope="row">
            {row.x1}
        </TableCell>
        <TableCell className={classes.fontEditable} align="right">
            {row.x2}
        </TableCell>
        {i === 0? 
           <TableCell rowSpan={4} className={classes.fontEditable} align="right">
             {row.w1}
           </TableCell>
           <TableCell rowSpan={4} className={classes.fontEditable} align="right">
             {row.w2}
           </TableCell>
        :null}
        <TableCell className={classes.font} align="right">
            {row.t}
        </TableCell>
    </TableRow>
))}