jquery REACT ERROR< th>不能作为的子级出现< thead>,请参阅(unknown)> head> th

jyztefdp 于 2023-10-17 发布在 jQuery

关注(0)|答案(5)|浏览(125)

我正在开发一个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

**编辑我已经尝试在头下添加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

下一个错误是

Warning: validateDOMNesting(...): tr cannot appear as a child of table. See (unknown) > table > tr. Add a <tbody> to your code to match the DOM tree generated by the browser.

我是新的React和不熟悉的coffeescript，所以我想知道它是否与间距或什么。测试了不同的间距，这并没有帮助。我把头都拿出来了，这导致我的应用程序坏了，所以..不知道是什么问题

jquery

来源：https://stackoverflow.com/questions/43958700/react-error-th-cannot-appear-as-a-child-of-thead-see-unknown-thead-th

5条答案

按热度按时间

j13ufse21#

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

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

赞(0）回复(0）举报 2023-10-17

xvw2m8pv2#

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>

赞(0）回复(0）举报 2023-10-17

643ylb083#

错误，我在thead中有tbody
（一）

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

而不是（2）

<thead>
...
</thead>

<tbody>
...
</tbody>

（2）我的问题解决了。

赞(0）回复(0）举报 2023-10-17

8hhllhi24#

我之所以出现这个错误，是因为我的列表中其他地方的错误。
例如，@Sag1v使用<tbody>而不是</tbody>来关闭列表的主体，我敢打赌这是导致错误的原因。

赞(0）回复(0）举报 2023-10-17

zaqlnxep5#

只需将<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>
    );
}

赞(0）回复(0）举报 2023-10-17

我来回答

jquery REACT ERROR< th>不能作为的子级出现< thead>,请参阅(unknown)> head> th

5条答案

相关问题

热门标签

最新问答

jquery REACT ERROR< th>不能作为的子级出现< thead>,请参阅(unknown)&gt; head&gt; th

5条答案

相关问题

热门标签

最新问答

jquery REACT ERROR< th>不能作为的子级出现< thead>,请参阅(unknown)> head> th