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

Question

我最近一直在学习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,呈现:

<table> 
  <thead>
    <tr>
    {headers}  <!-- <Header/> components -->
    </tr>
  </thead>
  <tbody>
    {rows}     <!-- <Row/> components -->
  </tbody> 
</table>

该Header组件呈现为<th colSpan="2">Col 1 Header</th>

每个Row呈现为

<tr>
  {cells}    <!-- <Cell/> components -->
</tr>

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

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

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

<div>
   <div class="subcol1">Data 1A</div>
   <div class="subcol2">Data 1B</div>
</div>

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

Answer 1

反应它应该 colSpan属性不colspan.

<td colSpan={2}>

</td>

更多信息在这里

Answer 2

现在,不可能在React中创建一个呈现为两个表格单元格的组件.在未来它可能是可能的,但是现在,你最好的选择可能是制作一个返回单元格的普通JS函数:

function cellsForData(data) {
    return [
        <td>Data 1A</td>,
        <td>Data 1B</td>
    ];
}

您可以在cells表组件的数组中包含它,一切都应该有效.