[解決済み] リアクトです。<tr>は<td>の子として表示できません。コメント > td > tr を参照してください。

質問事項

では、なぜreactは'td'の子として'tr'を持つことができないと文句を言うのでしょうか？

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

もしかして、もう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