REACT ERROR <th>不能作为<thead>的子代出现。参见(未知)> thead> th


70

我正在使用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树。

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


4
应该是thead > tr > th
zerkms

我输入的thread不是thead
-ArtiomLK,

Answers:



63

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


1
我曾尝试将tr添加到thead下的代码中,但这给了我一个额外的错误。
DianaBG '17

'``React.DOM.table className:'table-bordered'React.DOM.thead null React.DOM.tr null React.DOM.th null,'描述'React.DOM.th null,'动作'React。 DOM.tbody空,为后在@ state.posts React.createElement后,键:post.id,岗位:岗位,handleDeletePost:@deletePost
DianaBG

然后,我仍然会遇到原始错误以及“ tr不能作为表的子代出现”和
DianaBG

1
谢谢Sagiv BG是有帮助的
Enoy

2

由于清单中其他地方的错误,我出现了这个错误。

例如@ Sag1v有 <tbody>的,而不是</tbody>收他的名单的身体,我敢打赌,导致错误。


1

我误会了 tbodythead

(1)

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

代替(2)

<thead>
...
</thead>

<tbody>
...
</tbody>

更改为(2)解决了我的问题。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.