使用反应窗口渲染表行

如何解决使用反应窗口渲染表行

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