问

如何在React中为每列两个单元格建模HTML表格？

soseast9975 发布于 2023-02-04 12:19

我最近一直在学习React,我遇到了一个问题,试图建模并呈现以下结构的HTML表(请注意使用标题的colspan属性将列拆分为两个).

+---------------------+---------------------+-----+-------------------+
|     Col 1 Header    |     Col 2 Header    | ... | Col N header      |
+----------+----------+----------+----------+-----+---------+---------+
| Data 1A  | Data 1B  | Data 2A  | Data 2B  | ... | Data NA | Data NB |
+----------+----------+----------+----------+-----+---------+---------+
| Data 1A  | Data 1B  | Data 2A  | Data 2B  | ... | Data NA | Data NB |
+----------+----------+----------+----------+-----+---------+---------+

我已经像这样建模了表格:

主要组件Table,呈现:


    {headers}  
    {rows}

该Header组件呈现为Col 1 Header

每个Row呈现为


  {cells}

现在Cell组件是我遇到麻烦的地方,因为我想将每列拆分成两个子列(如标题列所示colSpan="2").

由于ReactComponent的render()方法必须返回一个子组件,我无法弄清楚如何返回这两个单元格:Data 1AData 1B

在非桌面情况下,我可以返回类似的东西


   Data 1A
   Data 1B

但我似乎无法弄清楚如何用桌子来实现这个目标.也许我设计组件结构的方式有点偏差？

2 个回答

反应它应该 colSpan属性不colspan.
```
<td colSpan={2}>

</td>
```
更多信息在这里
2023-02-04 12:22 回答

芬妮诗婚纱厂
现在,不可能在React中创建一个呈现为两个表格单元格的组件.在未来它可能是可能的,但是现在,你最好的选择可能是制作一个返回单元格的普通JS函数:
```
function cellsForData(data) {
    return [
        <td>Data 1A</td>,
        <td>Data 1B</td>
    ];
}
```
您可以在cells表组件的数组中包含它,一切都应该有效.
2023-02-04 12:22 回答

28划生12_928

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签