react-virtualized的WindowScroller、List、AutoSizer使用

主要代码如下，红色字体为react-virtualized使用代码。
注意scrollElement 的定义，滚动区域宽高都可自定义，根据需要使用组件
import React, { Component } from 'react';
import { List, Flex, Button, Modal } from 'antd-mobile';
import { connect } from 'dva';
import { List as VList, CellMeasurerCache, CellMeasurer,WindowScroller,AutoSizer } from 'react-virtualized';
import GoodsDetail from '../GoodsDetail';
import 'react-virtualized/styles.css'; // only needs to be imported once
import styles from './index.less';

const alert = Modal.alert;
const ListItem = List.Item;
const FlexItem = Flex.Item;
class OwnerPlanoutDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible:false,
            width: 0
        };
    }

    measureCache = new CellMeasurerCache({
        fixedWidth: true,
        minHeight: 220
    });
    // 使用WindowScroller必须，根据滚动条所在元素去设置
    _setRef = (ref) => {
        this.setState({scrollElement: ref});
    }
    render() {
        const self = this;
        const { goods=[] } = this.props;
 
        // 商品不足20条时不适用虚拟列表
        const dom = goods.map((item,index)=>{
            return <GoodsDetail
                key={index}
                data={item}
            />
        });
        return (
            <div ref={this._setRef} key="1">
                <List className={styles.titleArea}>
                    标题
                </List>
                <div className={styles.gutter}></div>
                
               

<List style={{marginBottom:'1.5rem'}}>
    <h1>商品信息</h1>
    {goods.length > 20 ? <WindowScroller
        scrollElement = {this.state.scrollElement}
    >
        {({ height, isScrolling, onChildScroll, scrollTop, registerChild }) => {
            return (
                <AutoSizer disableHeight>
                    {({width}) => (
                        <div ref={registerChild}>
                            <VList
                                height={height}
                                width={width}
                                isScrolling={isScrolling}
                                onScroll={onChildScroll}
                                scrollTop={scrollTop}
                                rowCount={goods.length}
                                rowRenderer={
                                    ({
                                         key,         // Unique key within array of rows
                                         index,       // Index of row within collection
                                         parent,
                                         style // Style object to be applied to row (to position it)
                                     })=>{
                                        return (
                                            <CellMeasurer cache={this.measureCache} columnIndex={0} key={key} parent={parent} rowIndex={index}>
                                                <GoodsDetail
                                                    key={key}
                                                    style={style}
                                                    data={goods[index]}
                                                />
                                            </CellMeasurer>
                                        )
                                    }
                                }
                                deferredMeasurementCache={this.measureCache}
                                rowHeight={this.measureCache.rowHeight}
                            />
                        </div>
                    )}
                </AutoSizer>

            )
        }
        }
    </WindowScroller> : dom}
</List>
            </div>
        )
    }
}