Wie modelliere ich eine HTML-Tabelle mit zwei Zellen pro Spalte in React?

Question

Ich habe kürzlich React gelernt, und ich bin in ein Problem beim Versuch, eine HTML-Tabelle der folgenden Struktur zu modellieren und rendern (beachten Sie die Spalten, die in zwei unter Verwendung der Colspan-Attribut für die Header aufgeteilt sind).

+---------------------+---------------------+-----+-------------------+ 
|  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 | 
+----------+----------+----------+----------+-----+---------+---------+ 

Ich habe die Tabelle wie folgt modelliert:

Hauptkomponente Table, das macht:

<table> 
    <thead> 
    <tr> 
    {headers} <!-- <Header/> components --> 
    </tr> 
    </thead> 
    <tbody> 
    {rows}  <!-- <Row/> components --> 
    </tbody> 
</table> 

Die Header Komponenten machen als <th colSpan="2">Col 1 Header</th>

Jeder macht als

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

Nun ist die Cell Komponente ist, wo ich in Schwierigkeiten geraten, wie ich jede Spalte in zwei Unter Spalten geteilt werden soll (wie die Header-Spalten colSpan="2" haben.)

Da ReactComponent's render() Methode ein einzelnes Kind Komponente zurückgeben muss, ich kann nicht herausfinden, wie die beiden Zellen wie folgt zurück: <td>Data 1A</td><td>Data 1B</td>

In nicht-Tabelle Situationen könnte ich so etwas wie

zurückkehren

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

aber Ich kann mir nicht vorstellen, wie ich das mit einem Tisch erreichen kann. Vielleicht ist die Art und Weise, wie ich die Komponentenstruktur entworfen habe, ein bisschen deprimiert?

Answer 1

Momentan ist es unmöglich, eine Komponente in React zu erstellen, die als zwei Tabellenzellen rendert. In Zukunft könnte es möglich sein, aber für jetzt, Ihre beste Wette ist wahrscheinlich eine einfache JS-Funktion zu machen, die die Zellen zurückgibt:

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

Sie können diese für Ihre Tabellenkomponente in Ihrem cells Array enthalten und alles sollte funktionieren .

Answer 2

in reagieren sollte es colSpan Attribut nicht colspan sein.

<td colSpan="2"> 

</td> 

weitere Informationen here