首页 > 代码库 > [React] Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer
[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: {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;
[React] Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。