反应未正确排序 JSX 元素答案

【问题标题】：React not ordering JSX elements correctly反应未正确排序 JSX 元素
【发布时间】：2016-02-28 17:24:46
【问题描述】：

我是 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。

【问题讨论】：

标签： html forms reactjs babeljs react-jsx

【解决方案1】：

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

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

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

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

td 可以包含form 或form 可以包含table。

【讨论】：