web-dev-qa-db-ja.com

REACT ERROR <th>は<thead>の子として表示できません。 （不明）> thead> thを参照してください

私はリアクションに取り組んでいます-Railsアプリで、コンソールにこのエラーが表示され続けます：

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

なぜこれが機能しないのか分かりません。テーブルにヘッダー（thead）を使用したいのですが、他の人のために機能しました。 tbodyを配置しますが、テーブルの実際のボディにはそれが必要です。

このテーブルのコードは次のとおりです。

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

**編集theadの下にtrタグを追加しようとしましたが、追加のエラーが発生します。これは私のコードを次のように変更したものです：

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

私が取得する次のエラーは次のとおりです。警告：validateDOMNesting（...）：trはテーブルの子として表示できません。 （不明）>表> trを参照してください。ブラウザに生成されたDOMツリーと一致するようにコードにaを追加します。

私は反応するのが初めてで、coffeescriptに精通していないので、それがスペースまたは何かに関係しているのではないかと思っています。異なる間隔をテストしましたが、助けにはなりませんでした。私はすべて一緒にtheadを取り出し、それは私のアプリがそう壊れた原因となった..問題が何であるかわからない

javascriptjqueryruby-on-railsreactjs
35
DianaBG

theadに許可される直接の子はtr要素のみ であり、thではありません。

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

thは、trではなく、theadの下にネストする必要があります。 ドキュメント

<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

リストのどこか他の場所に間違いがあるため、このエラーが発生しました。

たとえば、@ Sag1vには<tbody>の代わりに</tbody>があり、彼のリストの本文を閉じることができますが、エラーの原因になっているに違いありません。

2
J.McLaren

間違えて、tbodyの中にtheadがありました

（1）

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

代わりに（2）

<thead>
...
</thead>

<tbody>
...
</tbody>

（2）に変更して問題を解決しました。

1
getThingsDone