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

Question

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

我的代码：

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

React抛出此错误：ValidateDOMNesting（...）：不能显示为div的子级

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

Answer 1

您的问题是HTML问题。要制作表格，表格主体必须位于{{1}}标记内：

{{1}}

Answer 2

没有标签，任何表格标签都无法使用。应该在 就像：

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