7

我正在使用（和材料 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 来实现列表滚动，根据需要动态嵌入所需的 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处理警告，但我想不出任何有效的方法......divtable

如果我不想包含 a我可以thead设置outerElementType为table和innerElementTypetbody

4

1 回答 1

5

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

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

于 2020-09-18T20:24:29.877 回答