摘要:react-window插件一般用来和react-virtualized-auto-sizer配合使用,react-virtualized-auto-sizer负责获取父元素的宽度和高度,传入到List中,但实战时,往往有些列表用到了隐藏显示, 比方说disabled:none;当使用disabled为none时,react-virtualized-auto-sizer会移除子元素;当返回时,元素会重新渲染,滚动条也会滚到顶部;
备注:如果是’visibility: hidden;'子元素会保留,其仍然占用宽度和高度,实战中很多场景不适用,这里不展开讨论;本文主要讲自定义AutoSizer组件规避掉disabled:none的Bug;
项目依赖
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-window": "^1.8.9",
// 实用这个有bug所以自己封装了AutoSizer
"react-virtualized-auto-sizer": "^1.0.20",
日常使用
import AutoSizer from "@/views/Components/AzAutoSizer";
<AutoSizer>
{({ height, width }: {height: number, width: number}) => (
<List
height={height}
itemCount={curMonitorList.length}
itemSize={48}
width={width}>
{renderOrgItem}
</List>
)
}
</AutoSizer>
封装AutoSizer
import { useEffect, useState, useRef } from "react";
interface PropsType{
children: any
}
export default function AzAutoSizer({children}: PropsType) {
const curRef = useRef<HTMLDivElement>(null)
const [curWidthHeight, setCurWidthHeight] = useState({
height: 0,
width: 0,
});
const handleClick = () => {
if (curRef.current) {
const parentNode: any = curRef.current.parentNode;
const height = parentNode.offsetHeight;
const width = parentNode.offsetWidth;
curWidthHeight.height = height || 0;
curWidthHeight.width = width || 0;
setCurWidthHeight({...curWidthHeight});
}
};
useEffect(() => {
handleClick();
const handleResize = () => {
if (!curRef.current) { return; }
// const parentNode: any = curRef.current.parentNode;
// const height = parentNode.offsetHeight
// const width = parentNode.offsetWidth;
// // 表示父或祖先disabled: none;
// if (height === 0 && width === 0) {
// return;
// }
handleClick();
};
/* 窗口改变 */
window.addEventListener('resize', handleResize);
/* 是否可视化 */
const observer = new IntersectionObserver(([{ isIntersecting }]) => {
if (isIntersecting) {
if (!curRef.current) { return; }
if (curWidthHeight.height !== 0 && curWidthHeight.width !== 0) {
// observer.unobserve(curRef.current);
} else {
console.log('可视化');
handleClick();
}
}
});
curRef.current && observer.observe(curRef.current);
return () => {
/* 窗口改变 */
window.removeEventListener('resize', handleResize);
/* 卸载 */
if (curRef.current) {
observer.unobserve(curRef.current);
}
};
}, []);
return <div ref={curRef} style={{width: `${curWidthHeight.width}px`, height: `${ curWidthHeight.height}px`}}>
{children({height: curWidthHeight.height, width: curWidthHeight.width})}
</div>
}