如何处理“警告:validateDOMNesting(.)：<tr>不能作为<div>的子级出现”。当使用react窗口来呈现表行时
我使用react-window使用react-table 7 (和资料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来实现列表滚动，根据需要动态嵌入所需的TableRows，从而输出react警告。
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，来处理table警告中的div，但是我想不出任何有效的方法.
如果我不想包含一个thead，我可以将outerElementType设置为table，将innerElementType设置为tbody
回答 2
Stack Overflow用户
发布于 2020-09-18 20:24:29
Stack Overflow用户
发布于 2022-05-11 10:41:49
我找到的唯一解决办法是完全删除语义html表标记(th、tr、tbody、.)。当使用Material组件时，您可以指定它应该通过" component "-prop呈现为哪个HTML元素。
我把component="div“道具传递给了所有的表元素，解决了这个问题。
<TableHead component="div">很高兴知道:对于SEO和可访问性，这不是一个好的实现-但由于我们使用虚拟化列表，我们已经牺牲了这些方面，以更好的性能。
全例
主表
<TableContainer component="section">
<TableToolbar tableInstance={tableInstance} />
<MuiTable {...tableInstance.getTableProps()} component="div">
<TableHead component="div">
{tableInstance.headerGroups.map((headerGroup) => (
<TableRow {...headerGroup.getHeaderGroupProps()} component="div">
{headerGroup.headers.map((column) => (
<TableCell
component="div"
{...(column.id === "selection"
? column.getHeaderProps()
: column.getHeaderProps(column.getSortByToggleProps()))}
>
{column.render("Header")}
{column.id !== "selection" ? (
<TableSortLabel
active={column.isSorted}
// react-table has a unsorted state which is not treated here
direction={column.isSortedDesc ? "desc" : "asc"}
/>
) : null}
</TableCell>
))}
</TableRow>
))}
</TableHead>
<TableBody component="div" ref={tableBodyRef} style={{ width: "100%" }}>
<FixedSizeList
height={tableBodyHeight_inPx}
itemCount={tableInstance.rows.length}
itemSize={rowHeight_inPx}
width={tableBodyWidth} // tableInstance.totalColumnsWidth + 46
className={classnames("virtualized-list", "bigScrollbars")} // showScrollbars is used for css, virtualized-list for clean(er) markup only
>
{RenderRow}
</FixedSizeList>
</TableBody>
<TableFooter component="div">
{/* <TablePagination tableInstance={tableInstance} /> */}
</TableFooter>
</MuiTable>
</TableContainer>渲染行回调
const RenderRow = React.useCallback(
({ index, style }: { index: number; style: React.CSSProperties }) => {
const row = props.tableInstance.rows[index]
props.tableInstance.prepareRow(row)
return (
<TableRow {...row.getRowProps({ style })} className="tr" component="div">
{row.cells.map((cell: Cell<TRow>) => {
return (
<TableCell {...cell.getCellProps()} className="td" component="div">
{cell.render("Cell")}
</TableCell>
)
})}
</TableRow>
)
},
[
tableInstance.prepareRow,
tableInstance.rows,
tableInstance.state.selectedRowIds,
]
)https://stackoverflow.com/questions/63854336
复制相似问题
腾讯云开发者
