reactjs – 如何使用React中的每列两个单元格对HTML表进行建模？

我最近一直在学习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> 
  <thead>
    <tr>
    {headers}  <!-- <Header/> components -->
    </tr>
  </thead>
  <tbody>
    {rows}     <!-- <Row/> components -->
  </tbody> 
</table>

标题组件呈现为< th colSpan =“2”> Col 1 Header< 每行呈现为

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

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

由于ReactComponent’s render()方法必须返回单个子组件,所以我无法弄清楚如何返回两个单元格：< td>数据1A< / td>< td>数据1B< / td>

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

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

但我似乎无法弄清楚如何通过一张桌子来表达这一点.也许我设计的组件结构方式有点偏离？

现在不可能在React中创建一个渲染为两个表格单元格的组件.在将来可能是可能的,但现在最好的办法是制作一个返回单元格的简单JS函数：

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

您可以将其包含在您的表格组件的单元格数组中,并且所有内容都应该工作.

reactjs – 如何使用React中的每列两个单元格对HTML表进行建模？

猜你在找的React相关文章