为什么我不能在 React 中使用 JSX 将 tbody 标签嵌套在 div 标签内？答案

【问题标题】：Why can't I nest a tbody tag inside a div tag with JSX in React?为什么我不能在 React 中使用 JSX 将 tbody 标签嵌套在 div 标签内？
【发布时间】：2018-01-27 11:44:34
【问题描述】：

我是 React 初学者，我正在做一个项目，我将有一个表单，当数据输入时，表格将动态填充来自用户的数据。

我的代码：

<div>
  <tbody>
    <tr>
      <td>{this.props.someData}</td>
    </tr>
    <tr>
      <td>{this.props.moreData}</td>
    </tr>
  </tbody>
</div>

React 抛出这个错误：ValidateDOMNesting(...): cannot appear as a child of div

我尝试将表格放入一个新组件中，然后嵌套新组件，但我遇到了同样的问题。为什么 JSX 不喜欢 div 中的表格？有什么解决办法吗？

【问题讨论】：

因为错误表明 TBODY 不属于 DIV 它进入 TABLE 中
您需要将<tbody> 放在<table> 中。
顺便说一句，您的问题标题显示“table”标签，而您的实际问题使用的是“tbody”
错误似乎很容易解释 - tbody 的允许父母：developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody

标签： javascript html reactjs jsx

【解决方案1】：

您的问题是 HTML 问题。要制作表格，表格主体必须在<table> 标签内：

<table>
  <tbody>
  ...
  </tbody>
...
</table>

【讨论】：

【解决方案2】：

没有标签就没有表格标签。应该在喜欢：

<table>
<tbody>
    <tr>
      <td>{this.props.someData}</td>
    </tr>
    <tr>
      <td>{this.props.moreData}</td>
    </tr>
  </tbody>
</table>

【讨论】：