React：<tr> 不能作为 <td> 的 child 出现。见评论 > td > tr

Question

那么为什么 React 抱怨我不能将 'tr' 作为 'td' 的 child？

              <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>

也许我必须再放一个 table 什么的？

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>

在 <td> 中嵌套 <tr> 是无效标记。使用另一个table来布局它。

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

Browsers need the <tbody> tag. If it is not in your code, then the browser will automatically insert it. This will work fine on first render, but when the table gets updated, then the DOM tree is different from what React expects. This can give strange bugs, therefore React warns you to insert the <tbody>. It is a really helpful warning.

感谢@Stefan Dragnev

React：<tr> 不能作为 <td> 的 child 出现。见评论 > td > tr

React: <tr> cannot appear as a child of <td>. See Comment > td > tr

reactjs

react-jsx