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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/43958700/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 02:16:06  来源:igfitidea点击:

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

javascriptjqueryruby-on-railsreactjs

提问by DianaBG

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

我正在开发一个 react - rails 应用程序,但我的控制台中不断出现此错误:

```
Warning: validateDOMNesting(...): <th> cannot appear as a child of <thead>. 
See (unknown) > thead > th.

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.

我不确定为什么这不起作用..我想对表使用标题 (thead) 并且它对其他人有用。我会放 tbody 但我需要它作为桌子的实际主体。

here is my code for this 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

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

**编辑我曾尝试在 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

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.

我得到的下一个错误是:警告:validateDOMNesting(...):tr 不能作为表的子项出现。见(未知)> 表> tr。将 a 添加到您的代码以匹配浏览器生成的 DOM 树。

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

我是新手,不熟悉咖啡脚本,所以我想知道它是否与间距或其他东西有关。测试了不同的间距,但没有帮助。我一起取出了thead,这导致我的应用程序崩溃,所以..不确定是什么问题

回答by Bertrand Marron

The only direct children allowed for theadare trelements, not th.

唯一允许的直接子元素theadtr元素,而不是th

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

回答by Sagiv b.g

Well thshould be nested under a trnot a thead. Docs

那么th应该嵌套在 a trnot a 下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>

回答by J.McLaren

I've had this error come up because of mistakes elsewhere in my list.

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

For example @Sag1v has <tbody>instead of </tbody>to close the body of his list and I bet that is causing the error.

例如@Sag1v<tbody>没有</tbody>关闭他的列表正文,我敢打赌这会导致错误。

回答by Anshuman Goel

Mistakenly, I had tbodyinside thead

错误地,我在tbody里面thead

(1)

(1)

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

instead of (2)

而不是(2)

<thead>
...
</thead>

<tbody>
...
</tbody>

Changing to (2) solved my problem.

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