反应错误 < th > 不能作为 < thead > 的孩子出现。参见(未知) > thead > th

我正在开发一个 response-ails 应用程序，我的控制台总是出现这样的错误:

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

这是这张桌子的代码:

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

编辑 我试过在 head 下面添加 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

我得到的下一个错误是: Police: validateDOMNest (...) : tr 不能作为 table 的子元素出现。见(未知) > 表 > tr。向代码中添加一个以匹配浏览器生成的 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

86058 次浏览
小开

The only direct children allowed for thead are tr elements, not th.

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

Well th should be nested under a tr not a 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>

小开

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.

小开

Mistakenly, I had tbody inside thead

(1)

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

instead of (2)

<thead>
...
</thead>


<tbody>
...
</tbody>

Changing to (2) solved my problem.

小开

Just put <TableCell /> in to the <TableRow />

for example

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

提交答案