React未正確訂購JSX元素

Question

我是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中的錯誤，而是瀏覽器清理錯誤的語義。

A form元素不允許作爲tr元素的直接子元素。這就是爲什麼你的瀏覽器/ React輸出你看到的HTML。

粘貼在下面JSBin /小提琴HTML或W3 validator並查看結果

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

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