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

Question

我正在使用（和材料 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工作原理，它创建了几个divs 来实现列表滚动，根据需要动态嵌入所需的 TableRow，从而导致输出 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，以处理divintable警告，但我想不出任何有效的方法......

如果我不希望包括thead我可以设置outerElementType要table与innerElementType以tbody

Answer 1

FixedSizeList接受一个innerElementTypeprop来让你指定要使用的 HTML 标签而不是div. 据我阅读代码可以看出，它或多或少需要是一个标签字符串。

您可能希望它innerElementType是tbody，这意味着要稍微重新处理父元素；我猜你不会想继续使用TableBody.