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>

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

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

Answer 1

这是因为你创建了一个tableBody每个项循环，尝试在＆lt;之后设置循环。 TableBody＆gt;标记，因为你想循环＆lt; TableRow＆gt;不是＆lt; TableBody＆gt;

反应Material-UI - 表 - TableBody无法循环

1 个答案: