React 没有正确排序 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.[=11=]">
  <form class="updateForm" data-reactid=".au4np63w8w.1.0.1.0.[=11=].0"></form>
  <td data-reactid=".au4np63w8w.1.0.1.0.[=11=].0.0">
    <table data-reactid=".au4np63w8w.1.0.1.0.[=11=].0.0.0">
      <tbody>
        ...
      </tbody>
    </table>
  </td>
  <td data-reactid=".au4np63w8w.1.0.1.0.[=11=].0.1">
    <button id="0" name="Update" type="button" data-reactid=".au4np63w8w.1.0.1.0.[=11=].0.1.0">Update</button>
    <button id="0" name="Delete" type="button" data-reactid=".au4np63w8w.1.0.1.0.[=11=].0.1.1">Delete</button>
    <button id="0" name="Add" type="button" data-reactid=".au4np63w8w.1.0.1.0.[=11=].0.1.2">Add</button>
  </td>
</tr>

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

Answer 1

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

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

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

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

一个 td 可以包含一个 form 或者一个 form 可以包含一个 table.

React 没有正确排序 JSX 元素

React not ordering JSX elements correctly

html

forms

reactjs

react-jsx

babeljs