web-dev-qa-db-ja.com

Reactの列ごとに2つのセルを持つHTMLテーブルをモデル化するにはどうすればよいですか？

私は最近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 |
+----------+----------+----------+----------+-----+---------+---------+

私はこのようにテーブルをモデル化しました：

レンダリングするメインコンポーネント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コンポーネントで、各列を2つのサブ列に分割したいので問題が発生します（ヘッダー列にはcolSpan="2"があるため）。

ReactComponentのrender（） メソッドは単一の子コンポーネントを返す必要があるため、次のように2つのセルを返す方法がわかりません。<td>Data 1A</td><td>Data 1B</td>

テーブル以外の状況では、次のようなものを返すことができます

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

しかし、私はこれをテーブルで達成する方法を理解できないようです。たぶん、私がコンポーネント構造を設計した方法は少しずれていますか？

reactjs
13
Janne

現在、2つのテーブルセルとしてレンダリングされるコンポーネントをReactで作成することは不可能です。将来的には可能になる可能性がありますが、今のところ、最善の策は、次の値を返すプレーンなJS関数を作成することです。セル：

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

これをテーブルコンポーネントのcells配列に含めることができ、すべてが機能するはずです。

13
Sophie Alpert

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

<td colSpan={2}>

</td>

詳細 ここ

38
pahan