反应如何创建自定义溢出省略号

Question

我想创建一个顶部导航，其中包含可变数量的项目。栏上所有不适合的项目都不应渲染。当您将鼠标悬停在该菜单上时，将有一个小的“ ...”图标显示一个子菜单，该菜单显示剩余的导航项。关于如何实现这一目标的任何想法？我似乎无法使导航项成为父母宽度的条件。

我尝试在导航栏上设置一个ref，并对照客户端宽度检查滚动宽度，但这没有用。即使我可以使用它，我仍然会比我应该渲染的项目多一个，因为我事先不知道孩子的宽度。

                <div ref={ref} className="nav-list">
                    {ref ? items.map(i => {
                        return ref.scrollWidth <= ref.clientWidth ? (
                            <div className="nav-item" key={i.id}>
                              {i.title}
                            </div>
                        ) : false;
                    }) : false}
                    <div className="nav-remaining">
                        <div>
                            //render remaining items
                        </div>
                    </div>
                </div>

我看到有人通过递归添加子代，然后回溯以删除所有溢出的子代来实现此目的。但是我现在对如何在反应中实现这种方法有了想法。