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新扩展函数setState与lazyLoad及hook介绍
这篇文章主要介绍了React新扩展函数setState与lazyLoad及hook，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-12-12
本文主要介绍了React插槽使用方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
react16+antd4 RangePicker组件实现时间禁选示例
这篇文章主要为大家介绍了react16+antd4 RangePicker 时间禁选示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了vite+react+tailwindcss的简单使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
本文主要介绍了在React Router中使用JWT的实现,包括创建AuthProvider和AuthContext,实现ProtectedRoute组件,以及在React项目中处理公共路由和受校验保护路由,下面就来详细的介绍一下2026-06-06
这篇文章主要介绍了React 使用Hooks简化受控组件的状态绑定，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要介绍了浅谈react路由传参的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
react koa rematch 如何打造一套服务端渲染架子
这篇文章主要介绍了react koa rematch 如何打造一套服务端渲染架子，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
React 中如何将CSS visibility 属性设置为 hidden
这篇文章主要介绍了React中如何将CSS visibility属性设置为 hidden,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-05-05
setState() 的执行机制包括状态合并、批量更新、异步更新、虚拟 DOM 比较和渲染组件等步骤,这样可以提高性能并优化渲染过程,这篇文章主要介绍了react中的setState的执行机制,需要的朋友可以参考下2023-10-10
最新评论