Material-UI 中的多个展开/折叠 TableRow 组件

问题描述

我正在使用 Material UI 表并尝试展开折叠表内的 TableRow,但我遇到了问题。目前,我的列表都有折叠状态,但它们都链接一个“打开”状态,所以如果我打开一个列表,所有其他列表都会打开。

在每个列表没有很多状态的情况下,保持折叠彼此分开的最佳方法是什么。

show image

请检查这里的代码https://codesandbox.io/s/collapsetable-2wp59

我做错了什么?你能告诉我怎么做吗?

解决方法

只需将带有 Collapse 的一行移动到单独的组件中并处理内部的打开/关闭逻辑。 这样每一行都会有自己的打开状态和更新功能。

这是您更新的示例:https://codesandbox.io/s/collapsetable-forked-kj8v6