React实现多标签在有限空间内展示
场景
在业务中，需要在一个卡片组件中展示多个标签，标签组件高度相同，宽度和出现顺序不同，要求标签只能在有限的空间内展示（比如满足放入两行标签的空间），并在满足最大展示数量的情况下，对超出部分进行隐藏，然后通过鼠标 hover 的方式展示隐藏内容
思路
标签的高度相同，空间内可支持的标签行数固定，多标签的内容可以转化为一个数组数据，所以可把问题概括为：获取在给定的行数内，按顺序放入的不同宽度标签的最大数量，则余下的内容为需要隐藏的标签内容
有明确的输入输出，可以再进一步转化为一个算法问题：给定一个数字数组、限制的行数和行最大值，将数组中的数字依次放入行中并相加，相加的值不能超过行最大值，如果加入下一个数字后超出最大值，则该行不再计入该数字，并在下一行重新开始放入计算，如果超出行数，则停止，最后统计可以放入给定行中的最大数字数量
const calculateLength = (rowNums: number[], rowCount: number, rowMaxValue: number) => {
let count = 0; // 统计数字数量
let currRow = 0; // 当前行数
let currSum = 0; // 当前行的累加和
for (let i = 0; i < rowNums.length; i++) {
// 当前值大于最大值，停止
if (rowNums[i] > rowMaxValue) {
break;
}
// 如果加入下一个数字后超出最大值，重新开始计算
if (currSum + rowNums[i] > rowMaxValue) {
currRow++;
currSum = 0;
}
// 如果行数超过设定的行数，停止统计
if (currRow >= rowCount) {
break;
}
// 更新当前行的累加和
currSum += rowNums[i];
// 统计数字数量
count++;
}
return count;
};
项目中的实现
在明确思路后的，在项目中的实现只需要准备好算法中的需要的参数，再代入使用即可
需要获取的内容有：
- 标签宽度数组
- 行最大值
- 行数：行数是基于设计稿限制的，可以直接使用常量定义
标签宽度数组、行最大值获取
标签宽度数组的获取似乎有点矛盾，既要隐藏超出的标签，但又需要标签渲染为实际的 Dom 后才可以获取其宽度。这里直接采用比较粗暴的方式，使用绝对定位，脱离文档流全量渲染标签内容并隐藏，只用于获取标签的宽度
<div>
{renderTag()}
<div ref={ref} style={{ positions: 'absolute', opacity: 0 }}>
{renderAllTag()}
</div>
</div>
基于 ref 即可获行最大值，即标签父级 Dom 的宽度
const containerWidth = ref.current.clientWidth
在基于该 Dom 的 children 内容，获取标签的宽度数组
const tagChildren = ref.current.children; const itemWidthList = Array.from(tagsChildren).map(item => item.clientWidth)
最后带入上述 calculateLength 方法，计算出实际需要渲染的最大数量，并对后端返回的标签数据进行分割处理
最后
实现时还有一些需要注意的点：
- 计算中，当单个标签的宽度大于行最大宽度的时候，需要直接返回
- 计算出可以放入给定行中的最大数量后，还需要考虑给展示隐藏数量的 Dom 留空间，可以在计算结果的基础上，再减 1或减 2
以上就是React实现多标签在有限空间内展示的详细内容，更多关于React多标签展示的资料请关注脚本之家其它相关文章！
相关文章
本文主要介绍一种基于 React Hooks 的状态共享方案，介绍其实现，并总结一下使用感受，目的是在状态管理方面提供多一种选择方式。感兴趣的小伙伴可以了解一下2021-12-12
React中useEffect与生命周期钩子函数的对应关系说明
这篇文章主要介绍了React中useEffect与生命周期钩子函数的对应关系说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了react中Suspense的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要给大家介绍了关于react中组件通信的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-12-12
懒加载是一种优化技术,旨在延迟加载不必要的资源,直到它们真正需要时再进行加载,那么React的懒加载是如何实现的呢,下面小编就来和大家详细讲讲吧2025-03-03
详解React-Router中Url参数改变页面不刷新的解决办法
这篇文章主要介绍了详解React-Router中Url参数改变页面不刷新的解决办法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要为大家详细介绍了React列表栏及购物车组件使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要为大家介绍了React Hydrate原理源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
React Hook useState useEffect componentD
这篇文章主要介绍了React Hook useState useEffect componentDidMount componentDidUpdate componentWillUnmount问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
本文主要介绍了react render props模式实现组件复用示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
最新评论