zoukankan      html  css  js  c++  java
  • [React] Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer

    In this lesson we'll use CellMeasurer and CellMeasurerCache to automatically calculate and cache the height of a row. This will allow us to remove the predefined rowHeight on list and allow for dynamically sized rows.

    import React, {Component} from 'react';
    import {AutoSizer, List, CellMeasurer, CellMeasurerCache} from 'react-virtualized';
    
    const ScreenInfo = ({width, height}) => (<span> {width} height: {height}</span>);
    
    class App extends Component {
    
        constructor(props) {
            super(props);
            this.cache = new CellMeasurerCache({
                fixedWidth: true,
                defaultHeight: 50
            });
        }
        renderRow = ({key, isScrolling, parent, style, index}) => {
            return (
            <CellMeasurer
                key={key}
                cache={this.cache}
                parent={parent}
                columnIndex={0}
                rowIndex={index}
            >
                <div style={style} >
                    name: {this.props.data[index].name}
                    email: {this.props.data[index].email}
                    height: <div style={{height: `${this.props.data[index].randomHeight}px`}}>{this.props.data[index].randomHeight}px</div>
                </div>
            </CellMeasurer>
            );
        };
    
        render() {
            return (
                <AutoSizer>
                    {({width, height}) => {
                        return (
                            <div>
                                <ScreenInfo width={width} height={height}/>
                                <List
                                    rowCount={this.props.data.length}
                                    deferredMeasurementCache={this.cache}
                                    rowHeight={this.cache.rowHeight}
                                    rowRenderer={this.renderRow}
                                    width={width}
                                    height={height}
                                />
    
                            </div>
                        );
                    }}
                </AutoSizer>
            );
        }
    }
    
    export default App;
  • 相关阅读:
    MFC子窗体、父窗体
    私有云计算安全问题不容忽视
    云计算更多的是一种模式而不是技术
    原型模式向量的原型
    企业发票异常分析分离进项与销项
    考试系统框架搭建
    抽象工厂模式人与肤色
    工厂方法模式加密算法
    简单工厂模式女娲造人
    企业发票异常分析导入,清洗
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7083156.html
Copyright © 2011-2022 走看看