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不能作为表的子项出现。见（未知）＆gt;表＆gt; TR。添加一个代码以匹配浏览器生成的DOM树。

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

Answer 1

The only direct children allowed for thead are tr elements，而不是th。

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

Answer 2

好th应该嵌套在tr而不是thead下。 Docs

＆＃13;

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

＆＃13;

Answer 3

由于我列表中其他地方的错误，我出现了这个错误。

例如@ Sag1v有<tbody>而不是</tbody>来关闭他的列表正文，我打赌这会导致错误。

Answer 4

错误地，我在tbody里面有thead

（1）

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

代替（2）

<thead>
...
</thead>

<tbody>
...
</tbody>

转到（2）解决了我的问题。

REACT ERROR不能作为孩子出现。见（未知）＆gt; thead＆gt;日

4 个答案: