问题描述
接受的答案here非常接近我想要的答案。我有一个垂直的Flexbox,其中的项目具有固定的高度。我希望显示尽可能多的项目,但是如果某个项目完全溢出,则应完全省略。尝试链接答案中的代码片段,以了解我的意思。通过设置“ flex-wrap:wrap”和隐藏在容器上的溢出,可以很容易地实现这种效果。
但是,我还有一个问题:我不仅要显示这些项目,还需要知道当前正在显示多少。我试图显示尽可能多的项目,例如,如果有五个项目不合适,标签的底部将显示“ ...和另外5个”。最简单的方法是什么?我希望避免将容器的高度除以单个项目的高度(如果可能)。必须有更好的方法。
解决方法
进行了很多挖掘,终于找到了令我满意的解决方案。使用元素的offsetLeft以确定要包装的元素。进行相同的操作,但对水平伸缩框使用offsetTop。
CSS:
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
反应:
const items = [...]; // Array of ReactElements
const [numberOfItemsDisplayed,setNumberOfItemsDisplayed] = useState(0);
const ref = useRef(null)
useLayoutEffect(() => {
const cells = ref.current?.children;
if (cells && cells.length > 0) {
const startingOffset = cells[0].offsetLeft;
let numItems = 0;
for (let i = 0; i < cells.length; i++) {
if (cells.offsetLeft > startingOffset) {
break;
}
numItems++;
}
setNumberOfItemsDisplayed(numItems);
}
},[]);
return <div class="container" ref={ref}>{items}</div>