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

news/2025/2/16 2:56:54/

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

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

展开收起逻辑部分(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.ppmy.cn/news/1096067.html

相关文章

MATLAB中M文件编写

简介 所谓M文件就是将处理问题的各种命令融合到一个文件中&#xff0c;该文件以.m为扩展名。然后&#xff0c;由MATLAB系统编译M文件&#xff0c;得出相应的运行结果。M文件具有相当大的可开发性和扩展性。M文件有脚本文件和函数文件两种。脚本文件不需要输入参数&#xff0c;…

单片机有哪些分类?

单片机有哪些分类? 1.AVR单片机-----速度快&#xff0c;一个时钟周期执行一条指令&#xff0c;而普通的51单片机需要12个时钟周期执行一条指令。当然&#xff0c;Atmel公司出品的AT89LP系列单片机也是一个时钟执行一条指令&#xff0c;但目前还未普及。AVR单片机比51单片机多…

《TCP/IP网络编程》阅读笔记--getsockopt和setsockopt的使用

目录 1--Socket的多种可选项 2--getsocketopt() 3--setsockopt() 4--代码实例 1--Socket的多种可选项 Socket 拥有多种可选项&#xff0c;其可分为 SOL_SOCKET 层&#xff0c;IPPROTO_IP 层和IPPROTO_TCP 层等&#xff0c;一般通过 getsocketopt() 和 setsockopt() 函数进行…

vue3+ts+vite项目引入echarts,vue3项目echarts组件封装

概述 技术栈&#xff1a;Vue3 Ts Vite Echarts 简介&#xff1a; 图文详解&#xff0c;教你如何在Vue3项目中引入Echarts&#xff0c;封装Echarts组件&#xff0c;并实现常用Echarts图例 文章目录 概述一、先看效果1.1 静态效果1.2 动态效果 二、话不多数&#xff0c;引入 …

Ubuntu之apt-get系列--安装JDK8--方法/教程

原文网址&#xff1a;Ubuntu之apt-get系列--安装JDK8--方法/教程_IT利刃出鞘的博客 简介 本文介绍如何在Ubuntu下安装JDK8。 验证是否安装 可以通过如下命令判断系统是否有安装ssh服务&#xff1a; 命令 java -version 结果 如上所示&#xff0c;表示还没有安装。 查看…

Java HashMap常见面试题

1、HashMap 是什么&#xff1f;它的特点是什么&#xff1f; HashMap 是 Java 集合框架中的一个实现类&#xff0c;它基于哈希表实现。HashMap 具有以下特点&#xff1a; 键值对存储&#xff1a;数据以键值对的形式存储&#xff0c;每个键都是唯一的。快速查找&#xff1a;通过…

离线安装docker-compose

系统环境 系统是centos7.6 离线安装docker 下载docker 下载地址&#xff1a;https://download.docker.com/linux/static/stable/x86_64/ docker-20.10.21.tgz安装docker tar -xvf docker-20.10.21.tgz cp docker/* /usr/bin 离线安装docker-compose 下载docker-compose 普…

前端的规范

假如团队中的小伙伴在提交代码时没有遵循规范要求&#xff0c;只写了一个"fix"或"update&#xff0c;这会给其他小伙伴造成困扰&#xff0c;不得不花时间查看代码和推测逻辑。 不仅会浪费了时间和精力&#xff0c;可能会导致项目以下问题&#xff1a; 可读性差…