react Material-UI - Table - TableBody无法循环

Question

我对 react material-UI 的表格组件有疑问。

我想创建一个表格，根据它接收到的数据动态显示内容。所以我遍历数据，每次都创建一个新的 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>

这只会在in循环中输出一个循环，即使数据包含多个循环。

注意::: 代码有效，当我用 html 表格替换材料 UI 时，它按预期工作。

Answer 1

这是因为你创建了一个tableBody每个item循环，尝试在标签之后设置循环，因为你要循环的是而不是