[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 measure the width/height of our content area. We'll then use theList
component to render our set of data as a virtualized list into the DOM using windowing.
Install:
npm install --save react-vistualized
import React, {Component} from 'react';
import {AutoSizer, List} from 'react-virtualized'; const ScreenInfo = ({width, height}) => (<span>width: {width} height: {height}</span>); class App extends Component { renderRow = ({key, isScrolling, style, index}) => {
return (
<div style={style} key={key}>
name: {this.props.data[index].name}
email: {this.props.data[index].email}
</div>
);
}; render() {
return (
<AutoSizer>
{({width, height}) => {
return (
<div>
<ScreenInfo width={width} height={height}/>
<List
rowCount={this.props.data.length}
rowHeight={50}
rowRenderer={this.renderRow}
width={width}
height={height}
/> </div>
);
}}
</AutoSizer>
);
}
} export default App;
[React] Create an Auto Resizing Virtualized List with react-virtualized的更多相关文章
- [React] Create a Query Parameter Modal Route with React Router
Routes are some times better served as a modal. If you have a modal (like a login modal) that needs ...
- Wait… What Happens When my React Native Application Starts? — An In-depth Look Inside React Native
Discover how React Native functions internally, and what it does for you without you knowing it. Dis ...
- React与ES6(四)ES6如何处理React mixins
React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...
- react看这篇就够了(react+webpack+redux+reactRouter+sass)
本帖将对一下内容进行分享: 1.webpack环境搭建: 2.如何使用react-router: 3.引入sass预编译: 4.react 性能优化方案: 5.redux结合react使用: 6.fe ...
- 玩转 React 【第03期】:邂逅 React 组件
上期回顾 前文我们讲解了 React 模板 JSX,接着我们继续来看看 React 组件又是如何工作的呢? 组件化开发到了今天已经是大家的共识,在 React 中,组件同样也是组成我们整个项目的基本单 ...
- 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...
- react 16.8版本新特性以及对react开发的影响
Facebook团队对社区上的MVC框架都不太满意的情况下,开发了一套开源的前端框架react,于2013年发布第一个版本. react最开始倡导函数式编程,使用function以及内部方法React ...
- [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 ...
- [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 ...
随机推荐
- RTSP传输协议之Methods总结
RTSP/1.0 200 OK Server: DSS/5.5.5 (Build/489.16; Platform/Linux; Release/Darwin; state/beta; ) Cseq: ...
- 5.Maven之(五)Maven仓库
转自:https://blog.csdn.net/oonmyway1234/article/details/82315777 本地仓库 Maven一个很突出的功能就是jar包管理,一旦工程需要依赖哪些 ...
- #学习笔记#——JavaScript 数组部分编程(一)
来自牛客网的js编程题 1.移除数组 arr 中的所有值与 item 相等的元素.不要直接修改数组 arr,结果返回新的数组 function remove(arr, item) { if(!Arra ...
- string StartsWith 方法 Https
public ActionResult Index() { string url = "Https://www.baodu.com"; ...
- sessionStorage的使用方法
本篇是关于sessionStorage的使用方法的介绍,简单几行代码,实现sessionStorage,请大家查阅 (1)在需要设置sessionStorage的页面写如下代码可以存入sessionS ...
- python之-字符编码
1.内存和硬盘都是用来存储的. CPU:速度快 硬盘:永久保存 2.文本编辑器存取文件的原理(nodepad++,pycharm,word) 打开编辑器就可以启动一个进程,是在内存中的,所以在编辑器编 ...
- 【例题 8-15 UVA - 12174】Shuffle
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 枚举第一段的范围[0..i] (0<=i<s) 然后看看[i+1..i+s-1],[i+s,i+s+s-1]..这些区间 ...
- Mindjet MindManager 思维导图软件-使用思维导图跟踪调用流程,绘制软件框架
思维导图.据说是每一个产品经理必备的软件.假设你阅读大型源码.使用思维导图跟踪调用流程,绘制软件框架将会很方便. 特点:没什么好说的.用过的都说好. 软件截图: 下载:http://www.mindm ...
- 辛星跟您玩转vim第三节之程序猿特须要的移动方式
前面第二节我首先值得一提的是,我的vim教程pdf版本号已经写完了.大家能够去下载,这里是csdn的下载地址:csdn下载.假设左边的下载地址挂掉了.也能够自行在浏览器以下输入例如以下地址进行下载:h ...
- POJ 3243 Clever Y Extended-Baby-Step-Giant-Step
题目大意:给定A,B,C,求最小的非负整数x,使A^x==B(%C) 传说中的EXBSGS算法0.0 卡了一天没看懂 最后硬扒各大神犇的代码才略微弄懂点0.0 參考资料: http://quarter ...