使用语义UI React (表、粘滞、可见性组件)的无限滚动表格导致`<tr>不能显示为<div>`警告的子级
使用语义UI React的无限滚动表格导致<tr>不能显示为<div>警告的子级是因为语义UI React库中的表格组件要求<tr>元素必须是<tbody>的直接子元素，而不能是<div>等其他元素。
这个警告的原因是为了确保表格的结构正确，以便于浏览器正确解析和渲染表格。在HTML规范中，<tr>元素只能是<tbody>、<thead>或<tfoot>的直接子元素，而不能是<div>等其他元素。
为了解决这个警告，我们需要确保在语义UI React的无限滚动表格中，<tr>元素是作为<tbody>的直接子元素出现的。可以通过以下步骤来实现：
- 确保表格的结构正确：在语义UI React的无限滚动表格中，使用
<tbody>元素来包裹所有的<tr>元素，确保<tr>元素是<tbody>的直接子元素。 - 避免使用
<div>等其他元素作为<tr>的父元素：确保在表格中不要使用<div>等其他元素来包裹<tr>元素，以避免触发警告。 - 使用语义UI React提供的组件：语义UI React提供了一系列的表格组件，如
<Table>、<Table.Header>、<Table.Body>等，这些组件已经处理了表格结构的正确性，可以直接使用这些组件来构建无限滚动表格。
总结起来，为了避免<tr>不能显示为<div>警告的子级，我们需要确保表格结构的正确性，避免使用<div>等其他元素作为<tr>的父元素，并使用语义UI React提供的组件来构建无限滚动表格。
腾讯云相关产品推荐：
- 云服务器（CVM）：提供弹性计算能力，满足各类应用的需求。详情请参考：云服务器产品介绍
- 云数据库 MySQL 版（CDB）：提供高可用、可扩展的 MySQL 数据库服务。详情请参考：云数据库 MySQL 版产品介绍
- 云存储（COS）：提供安全可靠、高扩展性的对象存储服务。详情请参考：云存储产品介绍
- 人工智能开放平台（AI）：提供丰富的人工智能能力和服务，如图像识别、语音识别等。详情请参考：人工智能开放平台产品介绍
相关·内容
我已经使用语义UI React创建了一个无限滚动的表。我使用的是Sticky、Table、Visibility组件的组合。它的行为似乎是正确的，并且实现了我想要的。但是，我得到以下警告：
Warning: validateDOMNesting(...): <div> cannot
浏览 10提问于2017-12-12得票数 2
回答已采纳
我有一个很宽的表，当我使用Grid组件并在移动设备上将它的宽度设置为16时，我得到了一个奇怪的结果
我想要实现的结果是让表格像其他组件一样适合移动视图，并且是可
浏览 0提问于2019-01-21得票数 3
2回答
我有一个表格，它的主体大小是固定的，如Material UI中所述。我想要监听表格的scroll事件，以便加载更多的行。
听这个卷轴的最佳方法是什么？
浏览 0提问于2016-11-29得票数 2
我需要在vue上创建一个table/table-like组件。它显示表格数据。通常它有5-30行和最多30列。但是每个单元格中的元素呈现起来都相当繁重。每个都有几个事件侦听器，比如@click和@hover，这些调用方法可以呈现更多的组件。他们也有很大的活力。到目前为止，它工作得很好，但是现在需要对更多的行数使用这个组件，大约200行。显然，最好的方法是实现分页，因为渲染这么多单元格会极大
浏览 11提问于2021-10-15得票数 0
1回答
我正在尝试在一个表格中创建表格行，该表格可以通过单击它们(单独)来展开。 例如，如果我点击下图中指定的区域，一个Segment/Container (某种类型的区域)将会下拉，里面有内容。 我尝试过一个提到in this thread的解决方案，但潜在的问题是表行/单元格下的每个元素都受制于表HeaderCell的规则和边界。因此，例如，如果我尝试创建一个包含Segment<e
浏览 15提问于2020-10-13得票数 1
回答已采纳
我在一个reactjs网站上工作，该网站将以填充表格的项目数组为特色。 父shell将把可用记录的列表拉入一个数组中--并且使用子组件，我希望用这些数据填充表行。我已经开始创建子组件-但父组件提供的属性直到我将状态处理放在render函数附近时才被处理。我确实在子组件设置状态中有一个构造函数，但它看不到方法--我应该在componetDidMou
浏览 4提问于2019-09-29得票数 5
有人能向css/html学习者解释一下，为什么我要用display:table设置一个通用的html元素(例如<div>)的样式，而不是简单地使用HTML table标签吗？在我看来，后者是最好的选择，因为它是专门为表示表数据而实现的，但我知道，如果没有充分的理由，前者是不会出现的。我只是找不到一个合适的解释。我通常非常可靠的朋友，谷歌在这方面帮不了我太多<e
浏览 0提问于2013-03-23得票数 4
回答已采纳
在编写经典的html时，我们通常将元素放在div中，并给这个div一个类名或id。但在反应中，我们把我们的元素放在一个空的区域里。我们不给这个div提供id和类名。空div代码示例import classes from '../Input/Input.module.css';
retu
浏览 2提问于2020-12-17得票数 1
回答已采纳
1回答
有时，在我的可访问性审核中，我会遇到一个没有任何内容的<p>标记。屏幕阅读器将读出“空”，浪费我的时间和任何残疾人的时间浏览网站。
在传递<hr>标记时，也会读取诸如“分隔符”之类的冗余元素。我知道这些东西会减少容易接触到的体验。但他们是否被认为违反了WCAG标准？若然，那又是甚麽准则呢？标准中甚至考虑过这个问题吗？
浏览 6提问于2021-07-07得票数 1
回答已采纳
3回答
下面的沙箱显示了非常适合放置在带有粘性标题的Paper组件中的材料UI Table的代码：
我希望滚动条(水平和垂直)分别出现在浏览器页面的边缘，底部和右侧，但仍然控制Table本身的滚动。目前，我只能在从Paper中删除表格并使其直接成为页面的子级--或将跨越整个页面高度的主div的子级时才
浏览 0提问于2020-09-26得票数 1
在简单的旧语义-UI没有反应，我已经能够把一个表单在一个模式中，没有任何问题。由于这个错误，我使用输入的另一个反应代码不像预期的那样工作。这是演示问题
浏览 4提问于2015-10-20得票数 8
回答已采纳
2回答
好的，我正在尝试创建一个适合浏览器窗口大小的div。所以我有一个高度为100%的div。这一切都很好。但是，它包含一个表(在ASPX控件中，我不能更改代码等)，并且在许多级别下有一个带有"height:1869px“的div (以及overflow:auto和position:relative，如果这很重要的话这会导致调整表格的大小以适应它，并且整个页面
浏览 4提问于2010-11-17得票数 2
回答已采纳
7回答
我已经创建了几个表。现在，我需要两张表彼此相邻，而不是一张桌子在彼此的顶部。如何将第二个表定位到第一个表(右侧)旁边，但中间有足够的空间？这是我的第二个表的一些代码：<h3>Personaldaten</h3> <td>Externe Referenz:</td>
<td co
浏览 4提问于2012-07-09得票数 0
回答已采纳
我正在写一个页面，我需要一个HTML表来维护设置的大小。我需要表格顶部的标题一直留在那里，但我还需要表格的主体滚动，无论向表格中添加了多少行。想想迷你版的excel吧。这似乎是一项简单的任务，但我在网上找到的几乎每一个解决方案都有一些缺点。我该如何解决这个问题呢？
浏览 7提问于2008-09-24得票数 148
13回答
我有一个解决方案，通过这个解决方案，我可以使用次要的jQuery和CSS创建具有固定页眉/页脚的可滚动表格-但我正在寻找一种方法，使其成为一个跨浏览器兼容的CSS解决方案。为了清楚起见，我想要做的是只使用一个table标签(它是有效子标签，colgroup，col，thead，tbody，tfoot，tr，<代码>D9</代码>，<代码>D10
浏览 80提问于2012-08-10得票数 73
回答已采纳
4回答
场景-列出的项目-现在，只要我从文本字段中删除1 -NaNNaNNaNNaNNaN4914列表项应该只显示- 4, 9 and 14而不是NaN, NaN, 4, 9, 14。import React, { useState } from "react";
import List from ".import { useEffect
浏览 12提问于2022-04-02得票数 0
回答已采纳
9回答
我试图在HTML表中显示一个树结构。这基本上是一个你提到一个网站的人的列表，但你可以展开每个人，也可以看到他们提到的人(只有2到3个级别)。我还显示了每个人的一些信息，所以我使用了一个包含多个列的表。我想知道什么是最好的方式来显示它，让较低级别的人看起来“缩进”，但避免数据内容和显示每个数字含义的标题之间的不匹配……
我主要在这里寻找偷窃的想法:
浏览 69提问于2009-06-03得票数 15
3回答
无限渲染反应
、、
我有问题，弄清楚为什么我的应用程序是做无休止的渲染。在我的有状态组件内部，我在componentDidMount方法中调用一个redux操作(调用componentWillMount也会进行无穷无尽的呈现) <View> <Text> Text </Text> </View> }现在，当我在coincard呈现中控制台日志时，
浏览 1提问于2018-09-07得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
