web-dev-qa-db-fra.com

REACT ERROR <th> ne peut pas apparaître en tant qu'enfant de <thead>. Voir (inconnu)> thead> th

Je travaille sur une réaction - Rails app et je continue à avoir cette erreur dans ma console:

```
Warning: validateDOMNesting(...): <th> cannot appear as a child of <thead>. 
See (unknown) > thead > th.

Je ne sais pas pourquoi cela ne fonctionne pas. Je veux utiliser l'en-tête (thead) pour une table et cela a fonctionné pour quelqu'un d'autre. Je mettrais tbody mais j'en ai besoin pour le corps de la table.

voici mon code pour cette table:

```  
     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 J'ai essayé d'ajouter la balise tr sous thead et cela provoque une erreur supplémentaire. voici ce que j'ai changé mon code en:

```
   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: @deletePost

et l'erreur suivante que je reçois est la suivante: Avertissement: validateDOMNesting (...): tr ne peut pas apparaître en tant qu'enfant de la table. Voir (inconnu)> table> tr. Ajoutez a à votre code pour correspondre à l'arborescence DOM générée par le navigateur.

Je suis nouveau pour réagir et ne suis pas familier avec coffeescript alors je me demande si cela a à voir avec l'espacement ou quelque chose du genre. Testé différents espacements et cela n'a pas aidé. J'ai sorti le thead tous ensemble et cela a causé la rupture de mon application, donc .. pas sûr de savoir quel est le problème

javascriptjqueryruby-on-railsreactjs
35
DianaBG

Les seuls enfants directs autorisés pour thead sont tr éléments , pas th.

<table>
  <thead>
    <tr>
      <th />
    </tr>
  </thead>
  ...
</table>
53
Bertrand Marron

Bien th devrait être imbriqué sous un tr pas un thead. Docs

<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>
31
Sagiv b.g

J'ai eu cette erreur en raison d'erreurs ailleurs dans ma liste.

Par exemple @ Sag1v a <tbody> au lieu de </tbody> pour fermer le corps de sa liste et je parie que cela cause l’erreur.

2
J.McLaren

À tort, j'avais tbody à l'intérieur thead

(1)

<thead>
...
  <tbody>
  ...
  </tbody>
</thead>

au lieu de (2)

<thead>
...
</thead>

<tbody>
...
</tbody>

Changer en (2) a résolu mon problème.

1
getThingsDone