Table 行下的可扩展区域（语义 UI React）

Question

我正在尝试在 Table 中创建 Table 行，可以通过单击（单独）展开这些行。

例如，如果我单击下图中的指定区域，则会下拉一个 Segment/Container（某种区域），其中包含内容。

我尝试了 in this thread 中提到的解决方案，但潜在的问题是 Table Row/Cell 下的每个元素都受 Table Row/Cell 的规则和边界的约束=36=] 标题单元格。因此，如果我尝试创建一个 Table 行，其下有一个段，结果将如下所示：

如您所见，Segment 位于新行内，但限于 HeaderCell 的大小。

执行此操作时，我也遇到此错误：

validateDOMNesting(...): <div> cannot appear as a child of <tr>.
    in div (created by Segment)

Table行下的段似乎是禁止元素结构。

知道元素结构应该如何在 Table 行下创建某种区域吗？

Answer 1

<div> 不允许作为 table 行的子项的警告告诉您它无效 HTML。无论您使用的是语义 UI React 还是普通 HTML.

都是如此

我建议在您 table 中已有的行下方再渲染一行。在该行内设置一列，该列跨越所有列。现在你有了一个容器，如果你愿意，你可以把其他 UI 放在里面。如果出于某种原因需要，您可以自定义宽单元格的样式。

然后您可以在 table 的可点击区域设置切换状态。您可能希望将点击事件放在单元格的内容上，而不是单元格本身。

我拼凑了一个快速的 Codepen 来展示它是如何工作的。这为您提供了一个可以根据您的用例进行修改的工作概念。

Expandable area under a Table Row (Semantic UI React)