css < tbody>不能作为的孩子出现，< div>也< div>不能作为的孩子出现< table>

bt1cpqcv 于 2023-11-19 发布在其他

关注(0)|答案(1)|浏览(148)

请看一下我的表的示意图结构。为了便于阅读，我删除了所有不必要的东西。正如您所看到的，有一个标题和一个主体。只有主体被 Package 在ScrollArea（https://www.radix-ui.com/primitives/docs/components/scroll-area）中，因为我希望用户只能滚动主体而不是整个表

<table>
 <thead>
  <tr>
    <th></th>
    <th></th>
  </tr>
 </thead>
 <ScrollArea.Root>
  <ScrollArea.Viewport>
   <tbody>
    <tr>
     <td></td>
     <td></td>
    </tr>
   </tbody>
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar/>
 </ScrollArea.Root>
</table>

字符串
因此，当我转到包含此表的页面时，我在控制台中收到两个警告：
警告：validateDOMNesting（...）：div不能作为表的子级出现。
警告：validateDOMNesting（...）：tbody不能作为div的子级出现。
如果我从表中删除ScrollArea，那么警告就会消失。但是ScrollArea对于我在长表中移动非常重要。
告诉我如何才能摆脱这些警告？

css

来源：https://stackoverflow.com/questions/77462422/tbody-cannot-appear-as-a-child-of-div-and-div-cannot-appear-as-a-child-of

1条答案

按热度按时间

qij5mzcb1#

您可能希望将表分解为更小的组件，然后在适用时使用<ScrollArea>标记 Package 这些更小的组件。
你要做的是把你的代码分成两个不同的文件：
（table.js）

import React from 'react';
import * as ScrollArea from '@radix-ui/react-scroll-area';
import './styles.css';

import scrollArea_tbody from '../components/scrollArea_tbody';

const table = () => (
<table>
 <thead>
  <tr>
    <th></th>
    <th></th>
  </tr>
 </thead>
 <scrollArea_tbody />
</table>
);

export default table;

字符串
（scrollArea_tbody.js）

import React from 'react';
import * as ScrollArea from '@radix-ui/react-scroll-area';
import './styles.css';

const scrollArea_tbody = () => (
 <ScrollArea.Root>
  <ScrollArea.Viewport>
   <tbody>
    <tr>
     <td></td>
     <td></td>
    </tr>
   </tbody>
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar/>
 </ScrollArea.Root>
);

export default ScrollAreaDemo;

型
要构建一个组件，我会沿着React文档;具体来说，从这里开始将是一个很好的调用：https://react.dev/learn/your-first-component

赞(0）回复(0）举报 2023-11-19

我来回答

css < tbody>不能作为的孩子出现，< div>也< div>不能作为的孩子出现< table>

1条答案

相关问题

热门标签

最新问答