<tbody>不能显示为 <div> 的子级，<div> 不能显示为 <table 的子级>-解网

问：

请看一下我的表格的示意图结构。为了便于阅读，我删除了所有不必要的内容。正如你所看到的，有一个标题，有一个正文。只有正文包装在 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 不能显示为分区

如果我从表中删除 ScrollArea，则警告会消失。但是 ScrollArea 对我来说非常重要，因为它可以浏览长表。

告诉我如何摆脱这些警告？

css html-table html-tbody 基数

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

<tbody>不能显示为 <div> 的子级，<div> 不能显示为 <table 的子级>

<tbody> cannot appear as a child of <div> and <div> cannot appear as a child of <table>

评论

评论

&lt;tbody&gt;不能显示为 &lt;div&gt; 的子级，&lt;div&gt; 不能显示为 &lt;table 的子级&gt;

<tbody> cannot appear as a child of <div> and <div> cannot appear as a child of <table>

评论

评论

<tbody>不能显示为 <div> 的子级，<div> 不能显示为 <table 的子级>