☰

REACT ERROR cannot appear as a child of . See (unknown) > thead > th Ask Question

tag-icon • tag-icon javascript jquery ruby-on-rails reactjs
REACT ERROR cannot appear as a child of . See (unknown) > thead > th Ask Question

I am working on a react - rails app and I keep getting this error in my console:

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

そして次のエラーが発生します:

Warning: validateDOMNesting(...): tr cannot appear as a child of table. See (unknown) > table > tr. Add a <tbody> to your code to match the DOM tree generated by the browser.

私はReactを初めて使い、CoffeeScriptにも詳しくないので、スペースか何かが関係しているのではないかと思っています。スペースを変えて試してみましたが、効果はありませんでした。ヘッドをすべて取り外したら、アプリが壊れてしまいました。何が問題なのかわかりません。

ベストアンサー1

直接の子として許可されるのは要素のみtheadですtr、 ないth。

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

おすすめ記事