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;
  • 相关阅读:
    电梯调度算法---结对项目小进展
    程序的单元测试—软件工程课上所获得的感悟
    软件工程之个人项目--词频统计
    c语言中文件的读写函数
    9、访问或添加属性
    5、AOP例子(切面,通知,切入点)
    6、AOP相关概念
    4、SSH集成笔记
    3、整合SSH遇到的问题
    1、各个包的作用
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7083156.html
Copyright © 2011-2022 走看看