ERREUR DE REACTION <th> ne peut pas apparaître comme enfant de <thead>. Voir (inconnu) > thead > th

Question

Je travaille sur une application react - rails et je continue à obtenir 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 un tableau et cela a fonctionné pour quelqu'un d'autre. Je voudrais mettre tbody mais j'en ai besoin pour le corps du tableau.

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 ajoutée. Voici ce que j'ai changé dans mon code :

```
   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 : Warning : validateDOMNesting(...) : tr ne peut pas apparaître comme enfant de table. Voir (inconnu) > table > tr. Ajoutez a à votre code pour correspondre à l'arbre DOM généré par le navigateur.

Je suis nouveau sur react et pas familier avec coffeescript donc je me demande si cela a à voir avec l'espacement ou quelque chose. J'ai testé différents espacements et ça n'a pas aidé. J'ai supprimé l'encadré et mon application s'est arrêtée, donc je ne suis pas sûr de la nature du problème.

Answer 1

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

<table>
  <thead>
    <tr>
      <th />
    </tr>
  </thead>
  ...
</table>

Answer 2

Bien th doit ê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>

Answer 3

Par erreur, j'avais tbody à l'intérieur de thead

(1)

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

au lieu de (2)

<thead>
...
</thead>

<tbody>
...
</tbody>

Le passage à (2) a résolu mon problème.

Answer 4

Cette erreur s'est produite à cause d'autres erreurs dans ma liste.

Par exemple, @Sag1v a <tbody> au lieu de </tbody> pour fermer le corps de sa liste et je parie que c'est ce qui cause l'erreur.