Question

我正在构建一个表格，每一行后面跟一个＆＃34;扩展器＆＃34;行。默认情况下，这些行是隐藏的。单击任何行应切换下一行的可见性。

对我来说最有意义的设计是将这些行对视为单个＆＃34;单元格＆＃34;，并将切换逻辑封装在Cell元素中：

EDI to JSON

这是不允许的，并导致React抱怨。我可以将两个class Cell extends React.Component { # some logic here render() { return <tr><td>visibile</td></tr> <tr><td>invisibile</td></tr> } }节点放在tr中来解决这个问题。但它不仅非常丑陋，而且还让React抱怨更多并删除它们：

div

最终，我陷入了混乱，事件处理程序无法处理此错误：

 Danger.js:107 Danger: Discarding unexpected node: <div  >

我应该如何设计我的invariant.js:39 Uncaught Error: Invariant Violation: findComponentRoot(..., .0.1.$0.0.0.$/=11.0.0.1.$0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ''.组件，以便我没有＆＃34;危险＆＃34;语句，我仍然可以将逻辑封装在一个组件中吗？

Answer 1

解决方法是将tr元素包装在tbody中，正如@pawel在评论中指出的那样。

Answer 2

这似乎是反应中的一个主要问题：https://github.com/facebook/react/issues/2127

此时，您最简单的选项可能是react-package。它允许您创建<frag>标记，这些标记将在呈现组件时删除：

class Cell extends React.Component {
  # some logic here

  render() {
    return (
        <frag>
           <tr><td>visibile</td></tr>
           <tr><td>invisibile</td></tr>
        </frag>
  }
}

或者，正如@pawel所指出的，你可以use multiple <tbody> elements。

Answer 3

我也遇到了这个问题，不愿意在我的相邻tr周围包裹一个尸体。

我也尝试了<frag>...</frag>方法，但是导致错误。

在研究中，我发现了以下方法，该方法有效且不会引发错误（至少在我的用例中不对我有用）-解决方案似乎只是将相邻的trs包装在<> ... -这些不会呈现，并允许保留JSX的一个元素规则。

更新-我刚刚发现这是声明 ... 的简写方法，并且是可以接受的解决方案-但请注意，您不能在这些简写形式上使用键或属性。链接到有关片段的文档-https://reactjs.org/docs/fragments.html

class TableRow extends React.Component  {
  render() {
    return (
      <>
        <tr> ... </tr>
        <tr> ... </tr>
      </>
    );
  }
}

react - 让元素返回两个相邻的标签

3 个答案: