REACT ERROR< th>不能显示为< thead>的子代.参见(未知)>剧情日 [英] REACT ERROR <th> cannot appear as a child of <thead>. See (unknown) > thead > th

问题描述

我正在使用react-rails应用程序，并且在控制台中不断出现此错误:

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放在桌子上，但是我需要它作为桌子的实际主体.

I'm not sure why this isn't working..I want to use header (thead) for a table and it worked for someone else. I would put tbody but I need that for the actual body of the 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

**编辑 我尝试在thead下添加tr标记，这会导致额外的错误.这就是我将代码更改为:

**EDIT I have tried adding the tr tag under thead and that causes an extra added error. this is what I changed my code to:

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

and the next error i get is: Warning: validateDOMNesting(...): tr cannot appear as a child of table. See (unknown) > table > tr. Add a to your code to match the DOM tree generated by the browser.

我是新来的反应者，不熟悉coffeescript，所以我想知道这是否与间距或其他有关.测试了不同的间距，这没有帮助.我把thead全部拿出来，导致我的应用坏了，所以..不确定是什么问题

I'm new to react and not familiar with coffeescript so I'm wondering if it has to do with the spacing or something. Tested out different spacing and that didn't help. I took out the thead all together and that caused my app to break so..not sure what's the problem

推荐答案

The only direct children allowed for thead are tr elements, not th.

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

这篇关于REACT ERROR< th>不能显示为< thead>的子代.参见(未知)>剧情日的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！