使用具有虚拟化的React可滑动视图

Question

我正在使用lib react-swipeable-views来渲染嵌套视图，代码如下。但是，我想使用它的虚拟化HOC，以防LIST A或LIST B项目的数量很大，所以我不会立即渲染所有这些项目。我似乎无法弄清楚如何使用虚拟化HOC。

import SwipeableViews from 'react-swipeable-views'
import bindKeyboard from 'react-swipeable-views/lib/bindKeyboard'
import virtualize from 'react-swipeable-views/lib/virtualize'
const BindKeyboardSwipeableViews = bindKeyboard(SwipeableViews)

class MyComponent extends React.Component {
  render() {
    return (
      <div>
      <BindKeyboardSwipeableViews axis= 'y' containerStyle={Object.assign({}, styles.slideContainerY)}>
        <div style={Object.assign({}, styles.slide1)}>
          LIST A
        <BindKeyboardSwipeableViews >
        <div style={Object.assign({}, styles.slide1A)}>
         LIST A item 1
        </div>
        <div style={Object.assign({}, styles.slide1B)}>
         LIST A item 2
        </div>
      </BindKeyboardSwipeableViews>
        </div>
        <div style={Object.assign({}, styles.slide2)}>
          LIST B
        <BindKeyboardSwipeableViews >
        <div style={Object.assign({}, styles.slide1A)}>
         LIST B item 1
        </div>
        <div style={Object.assign({}, styles.slide1B)}>
         LIST B item 2
        </div>
      </BindKeyboardSwipeableViews>
        </div>
      </BindKeyboardSwipeableViews>
      </div>
    )
  }
}

const styles = {
  slideContainerY: {
    height: '80vh',
    minWidth: '94vw',
    color: '#fff'
  },
  slide1: {
    backgroundColor: '#FEA900',
    height: '80vh',
    color: '#fff'
  },
  slide1A: {
    backgroundColor: 'green',
    height: '50vh',
    width: '100%',
    color: '#fff'
  },
  slide1B: {
    backgroundColor: 'blue',
    height: '50vh',
    width: '100%'
  },
  slide2: {
    backgroundColor: '#B3DC4A',
    height: '80vh',
    color: '#fff'
  }
}