使用 react-table v7

Question

提前感谢您的帮助。

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

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

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

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

Answer 1

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

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