Как смоделировать таблицу HTML с двумя ячейками в столбце в React?

Недавно я изучал 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>

но я не могу понять, как добиться этого с помощью таблицы. Может быть, способ, которым я разработал структуру компонентов, немного не работает?

Ответ 1

В настоящее время невозможно создать компонент в React, который отображает как две ячейки таблицы. В будущем это будет возможно, но на данный момент лучше всего сделать простой JS-функцию, которая возвращает ячейки:

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

Вы можете включить это в свой массив cells для своего компонента таблицы, и все должно работать.

Ответ 2

в реакции он должен быть атрибутом colSpan не colSpan.

<td colSpan="2">

</td>

подробнее здесь