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

Question

这里接受的答案非常接近我想要的。我有一个垂直的弹性盒，其中的项目具有固定的高度。我希望显示尽可能多的项目，但如果某个项目完全溢出，则应完全忽略它。尝试链接答案中的代码片段，看看我的意思。通过设置“flex-wrap:wrap”和隐藏在容器上的溢出可以很容易地实现这种效果。

但是，我还有一个问题：我不仅需要显示这些项目，还需要知道当前显示了多少个项目。我试图显示尽可能多的适合的物品，然后，如果有 5 件物品不适合，那么底部的标签会显示“...还有 5 件”。解决这个问题最简单的方法是什么？如果可能的话，我希望避免仅将容器的高度除以单个物品的高度。一定会有更好的办法。

Answer 1

做了很多挖掘，终于找到了一个令我满意的解决方案。使用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[i].offsetLeft > startingOffset) {
                break;
            }
            numItems++;
        }
        setNumberOfItemsDisplayed(numItems);
    }
}, []);

return <div class="container" ref={ref}>{items}</div>