使用 react-table v7 创建嵌套表

Question

提前感谢您的帮助。

我要解决的问题是使用 react-table v7 创建一个表，并在该表中使用展开并显示另一个表，其中包含与第一个选择相关的数据，因为它附加在图像中。

这是图像的codesandbox 示例，我想做同样的事情，但使用最新版本的 react-table，我尝试使用子组件，但这些只显示数据，而不是它们拥有的标题，因此我无法在子表中进行排序和搜索

我试图在子组件中只渲染另一个反应表实例，但看起来它总是停留在第一列：

有没有人有一个看起来像参考图片中的示例可以帮助我？

Answer 1

因为 react-table v7 是无头的，所以你真的可以通过多种方式来解决这个问题。至少，您需要一种方法来控制打开的行，并让该行将其内容呈现为子行。我以forked react-table v7 Basic Table 示例为例。以下是我所做的基本更改，您可以将其应用于您自己的用例：

• 为了控制打开的行，创建了一个名为“open”的状态变量，它对应于正在显示内容的行的 id（或 false，如果没有）。做这种逻辑的方法有无数种，也不一定需要由父 Table 组件来控制。例如，如果您的 Rows 本身都是组件，那么它们可以跟踪自己的“打开”状态。
• 然后将子组件添加为父 Table 的子组件，父 Table 将其作为称为“children”的道具传递给它。然后根据上述“打开”状态变量有条件地将其呈现在自己的行中。在这里，它纯粹呈现为 {children}，但如果您要将数据从父组件向下传递到表的子组件，则更复杂的用例可以使用 React.cloneElement 或类似的。