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

Posted 2023-05-09

【中文标题】REACT ERROR <th> 不能作为 <thead> 的子项出现。见（未知）>thead > th

【英文标题】：REACT ERROR <th> cannot appear as a child of <thead>. See (unknown) > thead > th

【发布时间】：2017-10-13 00:16:18

【问题描述】：

我正在开发一个 react - rails 应用程序，但我在控制台中不断收到此错误：

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

我不确定为什么这不起作用..我想将表头（头）用于表格，而它对其他人有用。我会放 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，这导致我的应用程序崩溃了......不知道是什么问题

【问题讨论】：

应该是thead > tr > th

我输入的是thread而不是thead

【参考方案1】：

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

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

【讨论】：

我从没想过 React 会教我一些关于 html 的知识！

【参考方案2】：

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

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

【讨论】：

我尝试将 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, 用于@state.posts React.createElement Post 中的post, key: post.id, post: post, handleDeletePost: @deletePost

我仍然有我原来的错误以及“tr不能作为表的孩子出现”和

【参考方案3】：

错误地，我在thead 里面有tbody

(1)

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

而不是（2）

<thead>
...
</thead>

<tbody>
...
</tbody>

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

【参考方案4】：

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

例如@Sag1v 使用<tbody> 而不是</tbody> 来关闭他的列表主体，我敢打赌这是导致错误的原因。

【参考方案5】：

只需将<TableCell /> 放入<TableRow />

例如

import  Table, TableBody, TableCell, TableHead, TableRow  from '@mui/material';


export default function Untitled() 

  const items = GetItems() //get items from some where...

  return (
    <Table>
    <TableHead>
        <TableRow> // <--- I mean this section
            <TableCell> ID </TableCell>
            <TableCell> name </TableCell>
            <TableCell> last name </TableCell>
        </TableRow>
    </TableHead>
    <TableBody>
        
            items.map((item, key) => (
                <TableRow key=key> // <--- I mean this section
                    <TableCell> item.id </TableCell>
                    <TableCell> item.name </TableCell>
                    <TableCell> item.last_name </TableCell>
                </TableRow>
            ))
        
    </TableBody>
</Table>
    );