Estoy trabajando en una aplicación de reacción - rieles y sigo recibiendo este error en mi consola:
``` Warning: validateDOMNesting(...): <th> cannot appear as a child of <thead>. See (unknown) > thead > th.No estoy seguro de por qué esto no funciona... Quiero usar el encabezado (thead) para una tabla y funcionó para otra persona. Pondría tbody pero lo necesito para el cuerpo real de la tabla.
aquí está mi código para esta tabla:
``` React.DOM.table className: 'table table-bordered' React.DOM.thead null, React.DOM.th null, 'Description' React.DOM.th null, 'Actions' React.DOM.tbody null, for post in @state.posts React.createElement Post, key: post.id, post: post, handleDeletePost: @deletePost**EDIT He intentado agregar la etiqueta tr debajo de thead y eso causa un error adicional agregado. esto es lo que cambié mi código a:
``` React.DOM.table className: 'table table-bordered' React.DOM.thead null React.DOM.tr null React.DOM.th null, 'Description' React.DOM.th null, 'Actions' React.DOM.tbody null, for post in @state.posts React.createElement Post, key: post.id, post: post, handleDeletePost: @deletePosty el siguiente error que recibo es: Advertencia: validateDOMNesting (...): tr no puede aparecer como un elemento secundario de la tabla. Ver (desconocido) > tabla > tr. Agregue a su código para que coincida con el árbol DOM generado por el navegador.
Soy nuevo en reaccionar y no estoy familiarizado con coffeescript, así que me pregunto si tiene que ver con el espaciado o algo así. Probé diferentes espacios y eso no ayudó. Saqué la cabeza por completo y eso hizo que mi aplicación se rompiera, así que... no estoy seguro de cuál es el problema.
Los únicos elementos secundarios directos permitidos para thead son elementos tr , no th .
<table> <thead> <tr> <th /> </tr> </thead> ... </table>Bueno, debería th debajo de un tr , no de una thead . Documentos
<table> <thead> <tr> <th>name</th> <th>age</th> </tr> </thead> <tbody> <tr> <td>john</td> <td>33</td> </tr> <tr> <td>smith</td> <td>22</td> </tr> <tr> <td>jane</td> <td>24</td> </tr> </tbody> </table>Por error, tenía tbody dentro thead
(1)
<thead> ... <tbody> ... </tbody> </thead>en lugar de (2)
<thead> ... </thead> <tbody> ... </tbody>Cambiar a (2) resolvió mi problema.