reactjs - 如何在 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's 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

在React中它应该是colSpan属性而不是colspan。

<td colSpan={2}>

</td>

更多信息here