Недавно я изучал 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>
но я не могу понять, как добиться этого с помощью таблицы. Может быть, способ, которым я разработал структуру компонентов, немного не работает?