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

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>

我看到有人通过递归添加孩子然后回溯以删除所有溢出的孩子来实现这一点。但我现在知道如何在反应中实施这种方法。

标签： reactjs