使用 react-window 渲染表行时如何处理“警告：validateDOMNesting(...): <tr> 不能作为 <div> 的子项出现。”

Question

我正在使用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的工作原理，它创建了几个divs来实现列表滚动，根据需要动态嵌入需要的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，以处理table 警告中的div，但我想不出任何有效的方法......

如果我不想包含thead，我可以将outerElementType 设置为table，将innerElementType 设置为tbody

Answer 1

FixedSizeList 接受 innerElementType prop 以让您指定要使用的 HTML 标记而不是 div。据我阅读the code 可以看出，它或多或少需要一个标签字符串。

您可能希望这个innerElementType 成为tbody，这意味着要重新处理父元素；我猜你不想继续使用TableBody。