React：<tr>は​​の子として登場することはできません。コメント> td> tr

Question

なぜ私は '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> 

多分別のテーブルなどを置く必要がありますか？

Answer 1

はい、あなたは次第、このマークをする必要があります：<td>内のネストされた<tr>を持っているために、有効なマークアップではありません

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

。配置するには別のtableを使用してください。

https://github.com/facebook/react/issues/5652によると、あなたはtbodyであなたのテーブルの内容をラップする必要があります。

ブラウザは<tbody>タグを必要としています。あなたのコードに含まれていない場合は、ブラウザ が自動的に挿入されます。これは最初の レンダリングで正常に動作しますが、テーブルが更新されると、DOMツリーはReactが期待するものとは異なる になります。これにより、奇妙なバグが発生する可能性があります。 したがって、Reactは<tbody>を挿入するよう警告します。実際には という有益な警告です。

おかげ@Stefan Dragnev