REACT ERROR <th>不能作为<thead>的孩子出现.见(未知)> thead> th

Question

我正在开发一个react-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树.

我是新手做出反应而不熟悉咖啡因,所以我想知道它是否与间距或其他东西有关.测试了不同的间距,这没有帮助.我把所有的东西拿出去了,这导致我的应用程序破了......不确定是什么问题

Answer 1

允许的唯一直接孩子thead是tr元素,而不是th.

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

Answer 2

那么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>