reactjs - (react-window) 如何包装 {Row}或任何自定义组件？

Question

我正在使用名为react-window 的库

它是用于有效呈现大型列表和表格数据的库。

这是来自文档的示例代码：

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

const Example = () => (
  <List
    height={150}
    itemCount={1000}
    itemSize={35}
    width={300}
  >
    {Row}
  </List>
);

我想要做的是用<div>或任何其他自定义组件包装 {Row} 。

因为我想实现一些样式并且还要折叠过渡。

请注意，我不能简单地这样做：

const Row = ({ index, style }) => (
   <div style={{...}}> // wrapper
      <div style={style}>Row {index}</div>
   </div>
);

因为它将用包装器组件包装每个列表项，而不是用单个包装器组件包装整个列表。

我想用单个包装器组件包装整个列表。