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>
);

私がやりたいことは、{Row} を<div>または他のカスタム コンポーネントでラップすることです。

いくつかのスタイリングと折りたたみ遷移を実装したいからです。

単純にこれを行うことはできないことに注意してください。

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

リスト全体を単一のラッパーコンポーネントでラップするのではなく、すべての単一のリストアイテムをラッパーコンポーネントでラップするためです。

リスト全体を単一のラッパー コンポーネントでラップしたい。