Entonces, ¿por qué reacciona quejándose de que no puedo tener un 'tr' como hijo de un '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>¿Tal vez tengo que poner otra mesa o algo?
Sí, necesitarás esta marca:
<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> No es un marcado válido tener un <tr> anidado dentro de un <td> . Usa otra table para diseñarla.
De acuerdo con https://github.com/facebook/react/issues/5652 , deberá envolver el contenido de su tabla en un tbody :
Los navegadores necesitan la etiqueta
<tbody>. Si no está en su código, el navegador lo insertará automáticamente. Esto funcionará bien en el primer renderizado, pero cuando la tabla se actualiza, el árbol DOM es diferente de lo que espera React. Esto puede generar errores extraños, por lo que React le advierte que inserte el<tbody>. Es una advertencia muy útil.
Gracias @Stefan Dragnev