展开/折叠Materail UI中的TableRow组件

Question

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

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

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

Answer 1

material-ui网站表组件页面上有一个“可折叠表”的示例：https://material-ui.com/components/tables/#collapsible-table。

该示例正是我想要的，而且我敢肯定还有很多其他人。

Answer 2

根据您的用例，您可能希望使用expansion panels。

如果您仍然想使用表格，则可以在Collapse组件上设置component道具。您必须在原始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 3

此解决方案有效，您还可以将colSpan添加到包含TableCell的{​​{1}}中，以使边框宽度与顶部的TableCell数量匹配。

Collapse

Answer 4

TableRow不支持

<div>。删除<div>标签并在其位置使用Card组件对我来说很有效。

您可以在此处查看代码：https://github.com/shiveeg1/tracker-quick-entry/blob/master/src/components/super-row.js

此线程上还提供了许多非常有用的替代方法：https://github.com/mui-org/material-ui/issues/4476