我是这种特定风格的移动菜单的忠实粉丝:https://www.w3schools.com/html/default.asp

原因是即使在移动布局，取决于页面的大小，它仍然显示一些主要的导航项目。这样，我想你也许可以显示一些你最受欢迎的链接，而不需要用户进入移动菜单。

我试着用React重现这种行为。

为了保持示例的简单性:我从map语句返回所有链接，并将其呈现在布局中:

getNavigationItems(){
    const items = this.props.routes.slice(0, this.state.cutOffIndex).map((link) =>
    <a 
        className="DNavigationContainer-LinkItem"
        href="#"
        >{link.title}</a>
    );
    return items;
}

这个“cutoffindex"用于确定我是否应该只显示项目的子集。当我的页面宽度变小时，我会减少截止索引以显示越来越少的内容。

这很好，唯一的问题是这些链接的大小不同（基于文本的数量）。

我需要一个解决方案，将了解有多大的每个链接，因此我了解多少链接，我可以显示没有超过宽度。

我考虑在元素的构造函数中循环遍历每个链接，并将大小存储在数组中，然后调用该数组（当我有300个像素要处理时，尽可能多地获取少于300个像素组合的元素）。

for(var i = 0; i < this.props.routes.length; i++){
    var textLength = this.props.routes[i].title.length;
    //store this text length in an array?
}

然而，这似乎过于复杂，我想知道在CSS中是否有更简单的方法来做到这一点？还是一种偏好的方法？