react滚动加载之----react-window

最新推荐文章于 2025-10-26 09:23:24 发布

原创最新推荐文章于 2025-10-26 09:23:24 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript

js 同时被 2 个专栏收录

11 篇文章

订阅专栏

程序员

11 篇文章

订阅专栏

本文介绍了如何在React应用中利用FixedSizeList组件来自定义滚动加载。通过设置可视区域的高度、列表数据长度、行高和宽度，实现高效的数据渲染。示例代码展示了如何传递数据并渲染列表项。

react滚动加载

1.FixedSizeList

import { FixedSizeList } from 'react-window';

const listData = ['a','b',...];
// FixedSizeList组件
<FixedSizeList
  height={315} // 列表可视区域的高度
  itemCount={listData.length} // 列表数据长度
  itemSize={35} // 列表行高
  width={"100%"} //列表可视区域的宽度
  itemData={listData}
  useIsScrolling
>
   // index, style, data 必传参数
  {({ index, style, data }) => {
  	let item = data[index];
    return <div style={style}>{item}</div>
  }}
</FixedSizeList>