反应：仅显示完全适合弹性框的项目，并动态确定要显示的项目数

问题描述

接受的答案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>

flexbox reactjs reactjs