14

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

但我似乎无法弄清楚如何用一张桌子来实现这一点。也许我设计组件结构的方式有点偏离？

4

2 回答 2

39

在反应中它应该是 colSpan属性 not colspan。

<td colSpan={2}>

</td>

更多信息在这里

于 2015-09-15T09:28:41.233 回答
13

现在不可能在 React 中制作一个呈现为两个表格单元格的组件。将来可能有可能，但就目前而言，您最好的选择可能是制作一个返回单元格的普通 JS 函数：

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

您可以将它包含在您cells的表格组件的数组中，并且一切都应该正常工作。

于 2014-01-13T03:00:44.643 回答