我正在使用 react-window
使用 react-table 7
创建虚拟表(和 Material UI 表)。
我嵌入了 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
警告,但我想不出任何有效的方法...如果我不想包含
thead
我可以设置 outerElementType
至 table
和 innerElementType
至 tbody
最佳答案
FixedSizeList
接受 innerElementType
prop让您指定要使用的 HTML 标记而不是 div
.据我所知,阅读 the code ,它或多或少需要是一个标签字符串。
你可能想要这个 innerElementType
成为 tbody
,这意味着稍微重新处理父元素;我猜你不会想继续使用 TableBody
.
关于reactjs - 使用react-window渲染表格行时如何处理 "Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>. ",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63854336/