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

bt1cpqcv  于 2023-11-19  发布在  其他
关注(0)|答案(1)|浏览(147)

请看一下我的表的示意图结构。为了便于阅读,我删除了所有不必要的东西。正如您所看到的,有一个标题和一个主体。只有主体被 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对于我在长表中移动非常重要。
告诉我如何才能摆脱这些警告?

qij5mzcb

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

相关问题