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的更多相关文章

  1. [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 ...

  2. 理解iOS 8中的Self Sizing Cells和Dynamic Type

    http://www.cocoachina.com/ios/20140922/9717.html 在iOS 8中,苹果引入了UITableView的一项新功能--Self Sizing Cells,对 ...

  3. 《React Native 精解与实战》书籍连载「React Native 源码学习方法及其他资源」

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React Native 源码学习方法及其他资源. 最后的章节给大家介绍 React Native ...

  4. 《React Native 精解与实战》书籍连载「React Native 底层原理」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  5. 《React Native 精解与实战》书籍连载「React 与 React Native 简介」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  6. [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 ...

  7. [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 ...

  8. [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 ...

  9. [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 ...

随机推荐

  1. 56.ERR! configure error gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.

    Node.js 在安装模块的时候报错,缺少python环境. ERR! configure error gyp ERR! stack Error: Can't find Python executab ...

  2. 49.Node.js RESTful API

    转自:http://www.runoob.com/nodejs/nodejs-express-framework.html 什么是 REST? REST即表述性状态传递(英文:Representati ...

  3. 41.内存函数实现(memcpy,memset,memmove,memicmp,memchr.memccpy)

    memcpy #include <stdio.h> #include <stdlib.h> #include <memory.h> void * mymemcpy( ...

  4. VB&XML的增删改查

    简介:XML的增删改查 开发过程中有许多后台操作XML的过程,每次需要操作时都是找很多代码来参考或者百度一下.今天决定补充下XML操作的知识,把XML操作的增删改查都写了一遍,供以后开发参考 查询: ...

  5. 使用Vue动态生成form表单

    form-create 表单生成器 具有数据收集.校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框.单选框.输入框.下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择, ...

  6. Day 3 EX 购物车自写

    # -*- coding: utf_8 _*_# Author:Vi import copygoods = [0,[1,'iphone',20],[2,'ipad',2500]]salary = in ...

  7. .Net 程序在自定义位置查找托管/非托管 dll 的几种方法

    原文:.Net 程序在自定义位置查找托管/非托管 dll 的几种方法 一.自定义托管 dll 程序集的查找位置 目前(.Net4.7)能用的有2种: #define DEFAULT_IMPLEMENT ...

  8. cron 简单任务调度 go

    package main import ( "github.com/robfig/cron" "log" ) func main() { i := 0 c := ...

  9. wpf--------------datagrid全选反选 多选进行删除操作 前后台

    前台绑定 <DataGrid.Columns> <DataGridTemplateColumn > <DataGridTemplateColumn.HeaderTempl ...

  10. HDU 2563 统计问题 (递推)

    A - 统计问题 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Sta ...