[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的更多相关文章
- [React] Create an Animate Content Placeholder for Loading State in React
We will create animated Content Placeholder as React component just like Facebook has when you load ...
- 理解iOS 8中的Self Sizing Cells和Dynamic Type
http://www.cocoachina.com/ios/20140922/9717.html 在iOS 8中,苹果引入了UITableView的一项新功能--Self Sizing Cells,对 ...
- 《React Native 精解与实战》书籍连载「React Native 源码学习方法及其他资源」
此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React Native 源码学习方法及其他资源. 最后的章节给大家介绍 React Native ...
- 《React Native 精解与实战》书籍连载「React Native 底层原理」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- 《React Native 精解与实战》书籍连载「React 与 React Native 简介」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- [React] Create an Auto Resizing Virtualized List with react-virtualized
In this lesson we'll show how to use the AutoSizer component from react-virtualized to automatically ...
- [React] Create and import React components with Markdown using MDXC
In this lesson I demonstrate how to use the library MDXC to create and import React components with ...
- [React] Create component variations in React with styled-components and "extend"
In this lesson, we extend the styles of a base button component to create multiple variations of but ...
- [React] Create & Deploy a Universal React App using Zeit Next
In this lesson, we'll use next to create a universal React application with no configuration. We'll ...
随机推荐
- RTSP、HTTP、HTTPS、SDP四种协议详解
我们将主要讲解RTSP,HTTP,HTTPS, SDP四种协议. 一:RTSP协议简介 实时流协议RTSP是一个应用层协议,用于控制具有实时特性的数据(例如多媒体流)的传送. RTSP协议一般与RT ...
- ElasticSearch 工作原理
ElasticSearch 工作原理图 文字说明,以后更新
- [React] Compound Component (React.Children.map & React.cloneElement)
Imaging you are building a Tabs component. If looks like: <Tabs> <TabList> <Tab> o ...
- hdu4336Card Collector 概率dp+状态压缩
//给n个卡片每次出现的概率,求全部卡片都出现的须要抽的次数的期望 //dp[i]表示在状态的情况下到全部的卡片都出现的期望 //dp[i] = 1 + p1*dp[i] + ${p2[j]*dp[i ...
- Codeforces #258 Div.2 E Devu and Flowers
大致题意: 从n个盒子里面取出s多花.每一个盒子里面的花都同样,而且每一个盒子里面花的多数为f[i],求取法总数. 解题思路: 我们知道假设n个盒子里面花的数量无限,那么取法总数为:C(s+n-1, ...
- 31.Node.js 常用工具 util
转自:http://www.runoob.com/nodejs/nodejs-module-system.html util 是一个Node.js 核心模块,提供常用函数的集合,用于弥补核心JavaS ...
- node 内存溢出
遇到这个问题的人可以更快解决 再复制写一篇 利于百度搜索 坑爹的node 内存溢出 react开发项目 安装一个插件依赖 ,然后就报错了 报错如下(自己的没有截图出来 这是从别人的截图---报错基本 ...
- 【Codeforces Round #451 (Div. 2) D】Alarm Clock
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 尺取法+二分. 类似滑动窗口. 即左端点为l,右端点为r. 维护a[r]-a[l]+1总是小于等于m的就好. (大于m就右移左端点) ...
- js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么
js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么 一.总结 一句话总结:两者都是对表单进行序列化,serializeArray()返回的是json ...
- 浅谈Normalize.css
浅谈Normalize.css 一.总结 1.Normalize.css:它在默认的HTML元素样式上提供了跨浏览器的高度一致性,花了几百个小时来努力研究不同浏览器的默认样式的差异. 2.优于rese ...