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元素会呈现，以便表格单元格位于表单之外。我希望它应该都是WYSIWYG。我做错了什么或者它是一个真正的错误？顺便说一句，我正在使用Babel和Webpack来解析JSX。

Answer 1

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

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

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

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

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

反应没有正确排序JSX元素

1 个答案: