扫一扫分享
一个微小的 react 钩子,用于像微风一样渲染大型数据集。
$ yarn add react-cool-virtual
# or
$ npm install --save react-cool-virtual
import useVirtual from "react-cool-virtual";
const List = () => {
const { outerRef, innerRef, items } = useVirtual({
itemCount: 10000, // Provide the total number for the list items
itemSize: 50, // The size of each item (default = 50)
});
return (
<div
ref={outerRef} // Attach the `outerRef` to the scroll container
style={{ width: "300px", height: "500px", overflow: "auto" }}
>
{/* Attach the `innerRef` to the wrapper of the items */}
<div ref={innerRef}>
{items.map(({ index, size }) => (
// You can set the item's height with the `size` property
<div key={index} style={{ height: `${size}px` }}>
{index}
</div>
))}
</div>
</div>
);
};
仅供个人学习参考/导航指引使用,具体请以第三方网站说明为准,本站不提供任何专业建议。如果地址失效或描述有误,请联系站长反馈~感谢您的理解与支持!
手机预览