web前端[React库]:第三方组件库react-tiny-virtual-list

Posted 2021-04-26 技术直升机

使用npm安装：

npm install react-tiny-virtual-list --save

导入此组件库：

import VirtualList from 'react-tiny-virtual-list';

效果图：

组件代码如下：

import React from 'react';import VirtualList from 'react-tiny-virtual-list';
const MyTableWF = () => {
 const data = ['A', 'B', 'C', 'D', 'E', 'F'];  return ( <VirtualList width='100%' height={600} itemCount={data.length} itemSize={50} // Also supports variable heights (array or function getter) renderItem={({index, style}) => <div key={index} style={style}> {/* The style property contains the item's absolute position */} Letter: {data[index]}, Row: #{index} </div> } /> ); };  export default MyTableWF;

组件调用：

ReactDOM.render(<MyTableWF />, document.getElementById('root'));

---

个人网站：

https://mapleeureka.github.io/index-ch.html