Html 如何在ReactJS样式的组件中添加colSpan？

我正在制作一个小型web应用程序，以显示一个包含不同事件的JSON数据集和HTML表。我正在使用样式化组件库将CSS添加到我的组件中。问题是我正试图得到一张像这样的桌子：

我得到的是这张桌子：

使用的CSS：

  const TableHeader = styled.th`
    border-color: black;
    border-style:solid;
    border-width:1px;
    font-family:Arial; sans-serif;
    font-size:14px;
    font-weight:normal;
    overflow:hidden;
    padding:10px 5px;
    word-break:normal;
  `;

使用的ReacJS HTML：

<TableHeader>{props.id}</TableHeader>

{props.id}

我如何向这个ReactJS样式的组件添加ID显示为colSpan={2}的表头

非常感谢。

你能这样试试吗

const TableHeader = styled.th.attrs({
  colSpan: 2
})`
    border-color: black;
    border-style:solid;
    border-width:1px;
    font-family:Arial; sans-serif;
    font-size:14px;
    font-weight:normal;
    overflow:hidden;
    padding:10px 5px;
    word-break:normal;
  `;

---

对于React，可能需要将列span编号指定为字符串，即

colSpan:“2”，

。对于此答案，请尝试解释什么是

.attrs

，以及它解决问题的原因。请在此处查看他们的文档；非常感谢你！我检查了文档，但不知道如何将其应用于colSpan属性。再次感谢你。