reactjs - 如何处理“警告:validateDOMNesting(...):不能作为子级出现. " 使用 react-window 渲染表格行时
问题描述
我正在使用(和材料 UI 表)react-window
创建虚拟表。react-table 7
我正在嵌入 FixedSizeList 而不是 TableBody。像这样的东西:
<TableBody {...getTableBodyProps()}>
<FixedSizeList
height={listHeight}
itemCount={rows.length}
itemSize={rowHeight}
>
{RenderRow}
</FixedSizeList>)
</TableBody>
并且 RenderRow 返回 TableRows。像这样的东西:
const RenderRow = React.useCallback( ({ index, style }) =>
{
const row = rows[index];
prepareRow(row);
const rowProps = row.getRowProps();
return (<TableRow
{...row.getRowProps({
style,
})} />);
}
由于react-window
工作原理,它创建了几个div
s 来实现列表滚动,根据需要动态嵌入所需的 TableRows,从而导致输出一个 react js 警告。
webpack-internal:///490:506 Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>
只是忽略这个警告,不是我想做的事情,因为它可能会导致其他警告不被注意到。(我也不想在测试时使用发布版本)
那么是否可以防止发出此警告?或者是否可以在react-window
不收到此警告的情况下用于表行?
更新:尝试设置innerElementType
建议tbody
。
这会更改FixedSizeList
呈现的内部 div。
从:
<div style="position: relative; height: 96px; overflow: auto; will-change: transform; direction: ltr;">
<div style="height: 96px; width: 100%;">
至
<div style="position: relative; height: 96px; overflow: auto; will-change: transform; direction: ltr;">
<tbody style="height: 96px; width: 100%;">
所以现在包含在 tbody 中。
所以我想我还需要使用outerElementType
来更改外部,来div
处理警告,但我想不出任何有效的方法......div
table
如果我不想包含 a我可以thead
设置outerElementType
为table
和innerElementType
tbody
解决方案
FixedSizeList
接受一个innerElementType
道具,让您指定要使用的 HTML 标记,而不是div
. 据我阅读代码可以看出,它或多或少需要是一个标签字符串。
您可能希望它innerElementType
是tbody
,这意味着要重新处理父元素;我猜你不想继续使用TableBody
.
推荐阅读
- xml - 使用 Xpath 提取具有属性的元素
- blazor - Blazor 和 github 页面 (index.cshtml) 的问题
- c# - 当我只有 WCF 客户端时如何创建新的 WCF 服务
- ruby-on-rails - 为什么 bundler exec 无法在我的 Docker 入口点中加载 rails 命令?
- java - 如何在应用程序启动时显示自定义对话框?
- angular - 使用 Subject 或 BehaviourSubject 通过服务提醒组件发生了什么事?
- javascript - 在 d3.js 中使用带有坐标的 json 文件创建多行
- java - 为什么我收到“无法启动新会话。可能的原因是远程服务器地址无效或浏览器启动失败。” 错误
- mean-stack - 保存更新的异步方法值
- node.js - 生成临时电子邮件地址并阅读电子邮件 - NodeJS