reactjs - 使用react-window渲染表格行时如何处理 "Warning: validateDOMNesting(...): cannot appear as a child of . "

Question

我正在使用 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

Answer 1

FixedSizeList接受 innerElementType prop让您指定要使用的 HTML 标记而不是 div .据我所知，阅读 the code ，它或多或少需要是一个标签字符串。
你可能想要这个 innerElementType成为 tbody ，这意味着稍微重新处理父元素；我猜你不会想继续使用 TableBody .