反应没有正确排序 JSX 元素

Question

我是 React 的新手。

这是我在 React 组件中的代码：

for (var i = 0; i < fields.length; i++) {
  rows.push(
    <tr>
      <td>...</td>
      <td>...></td>
    </tr>
  )
}

return (
  <tr>
    <form className="updateForm" onSubmit={this.handleSubmit}>
      <td>
        <table>
          {rows}
        </table>
      </td>
      <td>
        <button id={this.props.id} name="Update" type="button">Update</button>
        <button id={this.props.id} name="Delete" type="button">Delete</button>
        <button id={this.props.id} name="Add" type="button">Add</button>
      </td>
    </form>
  </tr>

下面是输出 HTML：

<tr data-reactid=".au4np63w8w.1.0.1.0.$0">
  <form class="updateForm" data-reactid=".au4np63w8w.1.0.1.0.$0.0"></form>
  <td data-reactid=".au4np63w8w.1.0.1.0.$0.0.0">
    <table data-reactid=".au4np63w8w.1.0.1.0.$0.0.0.0">
      <tbody>
        ...
      </tbody>
    </table>
  </td>
  <td data-reactid=".au4np63w8w.1.0.1.0.$0.0.1">
    <button id="0" name="Update" type="button" data-reactid=".au4np63w8w.1.0.1.0.$0.0.1.0">Update</button>
    <button id="0" name="Delete" type="button" data-reactid=".au4np63w8w.1.0.1.0.$0.0.1.1">Delete</button>
    <button id="0" name="Add" type="button" data-reactid=".au4np63w8w.1.0.1.0.$0.0.1.2">Add</button>
  </td>
</tr>

请注意，应包含表格单元格的 form 元素呈现，以便表格单元格位于窗体之外。我希望它都应该是所见即所得的。我做错了什么还是实际的错误？顺便说一句，我正在使用 Babel 和 Webpack 来解析 JSX。

Answer 1

这不是 React 中的错误，而是浏览器清理了你的错误语义。

不允许将form元素作为tr元素的直接子元素。这就是为什么你的浏览器/React 会输出你看到的 HTML。

在 JSBin/Fiddle 或 W3 验证器中粘贴下面的 HTML 并查看结果

<table>
  <tr>
    <form>
      <td>Hello!</td>
    </form>
  </tr>
</table>

td可以包含form，也可以form可以包含table。