React？の列ごとに2つのセルを持つHTMLテーブルをモデル化するには？

Question

私は最近Reactを学んできましたが、次の構造のHTMLテーブルをモデル化してレンダリングしようとすると問題に遭遇しています（ヘッダーのcolspan属性を使用して2つに分割された列に注意してください）。

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

私はこのようなテーブルをモデリングしています。各が

としてレンダリング

<th colSpan="2">Col 1 Header</th>として Headerコンポーネントがレンダリング

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

：レンダリング

主成分Table、

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

Iは、2つのサブ列に各列を分割するように、私はトラブルに実行今どこCell成分である（ヘッダ列がcolSpan="2"を持っているとして。）

ReactComponent's render()方法は、単一の子コンポーネントを返す必要があるため、I非テーブルの状況では<td>Data 1A</td><td>Data 1B</td>

私は

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

が、のようなものを返すことができます：このような二つのセルを返す方法を見つけ出すことはできません私はテーブルでこれをどうやって実現するのか分からないようです。おそらく私はコンポーネントの構造を設計した方法は少しオフですか？

Answer 1

現時点では、Reactで2つの表のセルとしてレンダリングするコンポーネントを作成することは不可能です。将来的には可能かもしれないが、今のところ、あなたの最善の策は、細胞を返しプレーンJS関数を作るために、おそらくです：

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

あなたのテーブルコンポーネントのためにあなたの cells配列でこれを含めることができ、すべてが動作するはず

。

Answer 2

は、colSpan属性ではないcolspanである必要があります。

<td colSpan="2"> 

</td> 

詳細here