反应错误<th>不能显示为 的子项<thead>。见(未知)>头>

Question

我正在开发一个反应 - 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 树。

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

Answer 1

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

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

Answer 2

好吧，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>

Answer 3

错误地，我在里面有tbody thead

(1(

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

而不是 (2(

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

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

Answer 4

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

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

Answer 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>
    );
}