14

私は最近 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以下をレンダリングするMain component 。

<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()メソッドは 1 つの子コンポーネントを返す必要があるため、次のように 2 つのセルを返す方法がわかりません。<td>Data 1A</td><td>Data 1B</td>

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

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

しかし、テーブルでこれを達成する方法がわかりません。コンポーネント構造の設計方法が少しずれているのではないでしょうか?

4

2 に答える 2

39

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

<td colSpan={2}>

</td>

詳細はこちら

于 2015-09-15T09:28:41.233 に答える