使用rowspan创建动态表

Question

我正在使用React并试图创建一个动态表。桌子看起来像这样。

我正在使用此对象：

[
{category: "Type One", subCategory: "One", val: 1, rowSpan: 4},
{category: "Type One", subCategory: "Two", val: 2, rowSpan: 4},
{category: "Type One", subCategory: "three", val: 3, rowSpan: 4},
{category: "Type One", subCategory: "Four", val: 4, rowSpan: 4},
{category: "Type Two", subCategory: "Five", val: 5, rowSpan: 2},
{category: "Type Two", subCategory: "Six", val: 6, rowSpan: 2},
{category: "Type Three", subCategory: "Seven", val: 7, rowSpan: 1},
{category: "Type Four", subCategory: "Eight", val: 8, rowSpan: 1},
]

该对象本质上是动态的，我们最多可以获取200行。每行将具有相似的结构。

我有这样的想法：

body = myData.map(function(value) {
    return (
      <TableRow>
        <TableCell> { value.category} </TableCell>
        <TableCell> { value.subCategory} </TableCell>
        <TableCell> { value.val} </TableCell>
      </TableRow>
    )
  })

<Table>
   <TableBody>
       {body}
   </TableBody>
</Table>

问题：

1. 如何设置第一列的行跨度以获得预期的结果？
2. 创建表以获得所需结果是否有意义，或者我可以将DIV与引导程序一起使用？

Answer 1

假设您正在渲染<table>，则<td>元素具有一个rowspan属性，可以使用：

<td rowspan={...}>

当然，仅为“类别”的第一行生成该单元格：

body = myData.map((value, i) => {
  const firstOfCategory = (i == 0) || (value.category != myData[i-1].category); 
  return (
    <tr>
      { firstOfCategory && <td rowspan={value.rowSpan}>{value.category}</td> }
      <td>{value.subCategory}</td>
      ...
    </tr>
  );
});

Answer 2

它看起来像这样：

Football  Dragon League 4С…4
Dragon League 4С…4
Football  FIFA 20. Amateur daily league
Football  FIFA 21. eSports Battle. International B
FIFA 21.    eSports Battle. International B
Football  FIFA. Elite League
Football  Kazakhstan. Premier League
Kazakhstan. Premier League
Football  KLASK

即重复的值不会进入第二列。