前端实现展开收起的效果 (react)

news/2024/7/15 17:34:13 标签: 前端, react.js

需求背景:需要实现文本的展开收起效果,文本是一行一行的,数据格式是数组结构。
如图所示(图片已脱敏)
在这里插入图片描述在这里插入图片描述

简单实现:使用一个变量控制展开收起效果。

展开收起逻辑部分(react)

 const [fold, setFold] = useState(false);

  /** 展开收起 */
  const handleFold = () => {
    setFold(!fold);
  }

jsx 部分:

 <Descriptions.Item label="证书备用名称">
    <>
       {
       	// 展开时展示全部数组内容,收起时只展示前5项
         (fold ? sansData : sansData.slice(0, 5)).map((item, index) => {
           return (
             <div key={index}>
             	{item}
             </div>
           )
         })
       }
       // 控制文本展示
       {sansData.length > 5 &&
         <div style={{ color: '#1890ff', cursor: 'pointer' }} onClick={handleFold}>
           {fold ? <span><UpOutlined />收起</span> : '... 查看全部'}
         </div>
       }
     </> 
</Descriptions.Item>

http://www.niftyadmin.cn/n/5012580.html

相关文章

指针-成绩统计

任务描述 请设计一个函数&#xff0c;以指针变量作为函数的参数&#xff0c;从标准输入上读入数量不定的成绩。统计全班成绩的总数量、90 分及以上成绩的个数、60 分及以上成绩的个数和全班成绩的平均分&#xff0c;并返回这四个数给主程序。编写主程序调用此函数完成统计功能…

直播APP源码搭建:核心的服务器系统

在现代科技的推动下&#xff0c;网络衍生出了各种各样的技术&#xff0c;每个技术都被应用到需要的APP上&#xff0c;直播APP源码搭建出来的APP就是其中的一个&#xff0c;然而&#xff0c;这些技术能够成功的在直播APP源码搭建的APP中稳定的为用户们提供功能与服务&#xff0c…

视频云存储/安防监控/AI分析/视频AI智能分析网关:垃圾满溢算法

随着我国科技的发展和城市化进程加快&#xff0c;大家对于生活环境以及空气质量更加重视&#xff0c;要求越来越严格。城市街道垃圾以及生活区垃圾满溢已经成为城市之痛。乱扔垃圾&#xff0c;垃圾不入桶这些行为已经严重影响到了城市的美化问题。特别是炎热的夏日和雨水季节&a…

基于Java SSM+layui+mysql实现的图书借记管理系统源代码+数据库

介绍 本项目使用的技术栈是SSMlayuimysql&#xff0c;服务器使用的是tomcat 其中书籍图片存放的位置需要先在tomcat根目录下conf/setting.xml中配置虚拟路径&#xff0c;本项目配置的是D:\upload 完整代码下载地址&#xff1a;图书借记管理系统 用户角色划分 游客 使用本系…

激光切割机在船舶行业的的应用有哪些

我国享有世界工厂的美誉&#xff0c;是全球制造业的主力。然而&#xff0c;在船舶制造的关键技术领域&#xff0c;我国的研发投入不足&#xff0c;技术进步仍滞后&#xff0c;我国高端船舶制造的实力仍显不足。 在我国制造业全面复苏的当前背景下&#xff0c;“精准制作”正构成…

Mysql加密功能

Mysql加密功能 InnoDB加密功能查询条件问题开启整个数据库加密 InnoDB加密功能 InnoDB是MySQL数据库引擎的一种&#xff0c;它提供了加密存储的功能。具体来说&#xff0c;InnoDB引擎支持以下两种方式的加密存储&#xff1a; 表级加密&#xff1a;InnoDB支持表级加密&#xff…

【Hello Algorithm】贪心算法

本篇博客介绍&#xff1a; 简单介绍下贪心算法 贪心算法 介绍贪心算法最小字典序的字符串拼接最多会议数切棍子的最小成本IPO灯塔问题 介绍贪心算法 贪心算法是一种极具有自然智慧的算法 它会使用以一种局部最功利的标准来做出一个当前看来最好的选择 如果说我们根据局部最优…

freertos之任务运行时间统计实验

这里写目录标题 任务时间统计函数时间统计API函数使用流程实验 任务时间统计函数 void vTaskGetRunTimeStats(char * pcWriteBuffer); 时间统计API函数使用流程 实验 1.首先现在FreeRTOSConfig.h文件里将configGENERATE_RUN_TIME_STATS 和configUSE_STATS_FORMATTING_FUNCTIO…