2016-10-13 13 views
1

反応材料UIのテーブルコンポーネントに問題があります。反応材料UI - テーブル - TableBodyをループすることができません

私は、受信したデータに基づいてコンテンツが動的に表示されるテーブルを作成したいと考えています。だから、私はそのデータをループして、毎回新しいTableBodyをルート要素として作成しています。しかし、私がデータをループしているとき、最初の(または多分最後の)サイクルだけがループに表示されます。データは、いくつかのループを含んでいても、ループ内で

<Table selectable={ false }> 
    <TableHeader displaySelectAll={false} adjustForCheckbox={false}> 
     <TableRow> 
      <TableHeaderColumn colSpan={3}>{ this.i18n('Filename') }</TableHeaderColumn> 
      </TableRow> 
     </TableHeader> 
     { 
      files.map((file, idx) => (
      <TableBody displayRowCheckbox={ false } key={idx}> 
       <TableRow> 
       <TableRowColumn>{ file.name }</TableRowColumn> 
       <TableRowColumn colSpan={2}><Button variant="flat" data-name='cancel' color="primary">{ this.i18n('Delete') }</Button></TableRowColumn> 
       </TableRow> 
       <TableRow /> 
       <TableRow> 
       <TableRowColumn colSpan={3}> 
        <RadioButtonGroup name='caption' /> 
        <RadioButton /> 
        <RadioButton /> 
        </RadioButtonGroup> 
        <Input type='text' /> 
       </TableRowColumn> 
       </TableRow> 
      </TableBody> 
     )) 
     } 
     </Table> 

これだけ出力1サイクル:

はここでrenderメソッドからの私のコード(コードが大幅に単純化されている)です。

注::このコードは、マテリアルUIをhtmlテーブルに置き換えると、正常に動作します。

+0

はただ、これをテストしていない、ように見えますバグ。複数のTableBodyを持つことはできません。 –

+0

@JeffMcCloudテストしてくれてありがとう。 –

答えて

0

これはあなたがtableBodyすべてのアイテムのループを作成するので、あなたはループ<のTableRowにしたいので、右< TableBody>タグの後にループを設定しようとは> < TableBody>

関連する問題