（反应窗口）如何用<div>或任何自定义组件包装{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>
);

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

  

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