项目中依赖
"react-virtualized-auto-sizer": "^1.0.20",
"react-window": "^1.8.9",
日常使用
<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 = () => {
handleClick();
};
window.addEventListener('resize', handleResize);
const observer = new IntersectionObserver(([{ isIntersecting }]) => {
if (isIntersecting) {
if (!curRef.current) { return; }
if (curWidthHeight.height !== 0 && curWidthHeight.width !== 0) {
} else {
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>
}
使用方法
<AzAutoSizer >
{({ height, width }: {height: number, width: number}) => (
<List
height={height}
itemCount={curMonitorList.length}
itemSize={48}
width={width}>
{renderOrgItem}
</List>
)
}
</AzAutoSizer>