表格行下的可扩展区域（语义 UI 反应）答案

【问题标题】：Expandable area under a Table Row (Semantic UI React)表格行下的可扩展区域（语义 UI 反应）
【发布时间】：2021-01-27 21:09:21
【问题描述】：

我正在尝试在表格中创建表格行，该表格可以通过单击（单独）来展开。

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

我尝试了in this thread 提到的解决方案，但根本问题是表格行/单元格下的每个元素都受制于表格标题单元格的规则和边界。因此，例如，如果我尝试创建一个带有 Segment 的表格行，结果将如下所示：

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

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

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

因此 Table Row 下的 Segment 似乎是一个被禁止的元素结构。

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

【问题讨论】：

【解决方案1】：

<div> 不允许作为表格行的子项的警告告诉您它不是有效的 HTML。无论您使用的是 Semantic UI React 还是纯 HTML，都是如此。

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

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

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

【讨论】：