REACT ERROR <th> 不能作为 <thead> 的子项出现。见（未知）> thead > th

IT技术 javascript jquery ruby-on-rails reactjs
2021-04-28 10:58:45

我正在开发一个 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。将 a 添加到您的代码以匹配浏览器生成的 DOM 树。

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

4个回答

唯一允许的直接子元素thead是tr元素，而不是th。

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

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

错误地，我在tbody里面thead

(1)

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

而不是（2）

<thead>
...
</thead>

<tbody>
...
</tbody>

更改为（2）解决了我的问题。

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

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

其它你可能感兴趣的问题
上一篇在 Ant 设计文件上传中使用 customRequest 下一篇React 16.7 - React.SFC 现在已弃用