React:<tr>不能作为<td>的孩子出现.请参见注释> td> tr

Question

那么为什么反应抱怨我不能把'tr'作为'td'的孩子呢？

              <tr>
                <td colSpan={2}>
                  <tr>
                    <td>
                      <Some picture>
                    </td>
                    <td>
                      <some content>
                    </td>
                  </tr>
                  <tr>
                    <td colSpan={2}>
                      <p>Paragraph stuff</p>
                    </td>
                  </tr>
                </td>
              </tr>

也许我必须放另一张桌子或什么？

Answer 1

是的,你需要这个标记:

<table>
    <tbody>
        <tr>
            <td colspan={2}>
                <table>
                    <tbody>
                        <tr>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td colspan={2}>
                                <p>Paragraph stuff</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

这不是有效的标记有嵌套<tr>内<td>.使用另一个table来布局它.

根据https://github.com/facebook/react/issues/5652,您需要将表内容包装在tbody:

浏览器需要<tbody>标签.如果它不在您的代码中,则浏览器将自动插入它.这将在第一次渲染时正常工作,但是当表更新时,DOM树与React期望的不同.这可以给出奇怪的错误,因此React警告你插入<tbody>.这是一个非常有用的警告.

谢谢@Stefan Dragnev