react-virtualized可视化区域渲染的使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了react-virtualized可视化区域渲染的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

介绍

github地址：https://github.com/bvaughn/react-virtualized
实例网址：react-virtualized
如果体积太大，可以参考用react-window。

使用

安装： yarn add react-virtualized。
在项目入口文件index.js中导入样式文件（只导入一次就可以）
```
import 'react-virtualized/styles.css';
```
打开文档 [ https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md ]，找到list的配置，找到示例，拷贝示例。

复制进你的项目

import { List } from 'react-virtualized';

const list = Array(100).fill("react-virtualized");

function rowRenderer({
  key, // Unique key within array of rows
  index, // Index of row within collection
  style, // Style object to be applied to row (to position it)
  isScrolling,
  isVisible,
}: any) {
  return (
    <div key={key} style={style}>
      {list[index]}
    </div>
  );
}


export default function index() {
  return (
    <List
      width={300}
      height={300}
      rowCount={list.length}
      rowHeight={20}
      rowRenderer={rowRenderer}
    />
  )
}

react-virtualized可视化区域渲染的使用,react.js,前端,前端框架文章来源地址https://www.toymoban.com/news/detail-637817.html

其中 rowRenderer 表示渲染函数的内容， isScrolling表示是否在滚动中，isVisible是否可见，！！！style样式属性，这个很重要，一定要加，作用是指定每一行的位置。

扩展

让list组件占满整个屏幕（AutoSize）

打开文档: https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md
添加AutoSize组件，通过render-props模式，获取到AutoSizer组件暴露的width和height属性。
设置list组件的width和height属性。

需要设置城市选择页面的根元素高度为100%，让list组件占满整个页面。

import { List, AutoSizer } from 'react-virtualized';

const list = Array(100).fill("react-virtualized");

function rowRenderer({
  key, // Unique key within array of rows
  index, // Index of row within collection
  style, // Style object to be applied to row (to position it)
}: any) {
  return (
    <div key={key} style={style}>
      {list[index]}
    </div>
  );
}

const styles = {
  height: "100vh",
  width: "100vw"
}

export default function index() {
  return (
    <div style={styles}>
      <AutoSizer>
        {({ height, width }) => (
          <List
            height={height}
            rowCount={list.length}
            rowHeight={20}
            rowRenderer={rowRenderer}
            width={width}
          />
        )}
      </AutoSizer>,
    </div>
  )
}

到了这里，关于react-virtualized可视化区域渲染的使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！