在材质UI中展开/折叠表格行组件

Question

我需要扩展TableRow组件以打开另一个包含一些字段的div。但是如果我尝试在表体中添加div，则React会发出警告。

warning: validateDOMNesting(...): <div> cannot appear as a child of <tr>. See RowComponent > TableRow > tr > div.

所需功能类似于嵌套列表组件中的^按钮以折叠/展开。有没有办法自定义材料-ui TableRow来扩展/折叠？

Answer 1

根据您的使用情况，您可能需要使用expansion panels。

如果您仍想使用表格，可以在component组件上设置Collapse道具。你必须在原来的TableRow之外使用它。在TableCell或td内，您可以使用您想要的任何元素。查看this codesandbox的工作示例。

有趣的片段：

<Collapse in={open} component="tr" style={{ display: "block" }}>
  <td>
    <div>Expanded data.</div>
  </td>
</Collapse>

这里的重要部分：

1. component="tr"告诉Collapse组件使用tr而不是div
2. display: "block"覆盖display: "table-row"组件的默认tr

Answer 2

Table Row中不支持qazxsw poi。删除qazxsw poi标签并在其位置使用<div>组件为我工作。

你可以在这里看到代码：<div>

此线程上还提供了多种替代方案，非常有用：Card