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

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

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

展开收起逻辑部分(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.mzph.cn/news/73978.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

国际版腾讯云阿里云免费开户:全站加快 DCDN 重磅发布!打造新一代加快引擎

腾讯云全站加快 DCDN 重磅发布&#xff01;打造新一代加快引擎 在数字化转型革新逐渐深化的当下&#xff0c;安全高效成为企业上云、全球化布置的要害需求。 跟着运用场景复杂度不断提高、事务需求差异化开展&#xff0c;为了给企业供给更完善的安全加快服务&#xff0c;阿里云…

【Linux】VirtualBox安装Centos7

文章目录 下载并安装VirtualBox下载Centos镜像VirtualBox设置管理->全局设定&#xff1a;设定虚拟机默认安装路径工具->网络管理器&#xff1a;添加NetWork网络配置 VirtualBox安装CentOS7新建虚拟机&#xff0c;指定安装目录及名称&#xff0c;点击下一步指定虚拟机内存…

FGO:使用chaIdea获取抽卡数据(mitmproxy抓包)

需求描述 最近逛贴吧看到好多master贴出自己的抽卡概率截图&#xff0c;本非洲杂鱼master也对自己的脸黑程度产生了好奇&#xff08;曾经15单芭娜娜池子1五星&#xff0c;6单道满池子1五星&#xff0c;梅莉池子330抽1五星&#xff0c;最近的芭娜娜复刻又330抽1五星&#xff09…

Dedecms最新版--0day分享分析(二)

前言 接上一篇的Tricks&#xff0c;既然利用远程文件下载方式成为了实现RCE的最好方法&#xff0c;毕竟在执行的时候没有恶意shell文件&#xff0c;恶意木马被存放于远端服务器&#xff0c;那么下文的day就是对远程恶意文件的利用。 环境 下载最新版本&#xff1a; https://…

Java从入门到精通-数组(二)

4.数组的基本操作 数组的基本操作包括遍历数组、填充替换数组元素、对数组进行排序、复制数组以及查询数组中的元素。 • 4.1 遍历数组 遍历数组是访问数组中所有元素的过程&#xff0c;通常使用循环完成。 使用 for 循环遍历数组&#xff1a; int[] numbers {1, 2, 3, 4…

Datax抽取mysql的bit类型数据

背景&#xff1a;使用datax抽取mysql的一张表&#xff0c;里面有两个bit类型的字段&#xff0c;抽取出来显示如下&#xff1a; 需要在抽取reader里面进行处理配置 最终生成的datax的json文件reader的配置会转换为具体的数值 最终查询效果&#xff1a;

UniTask保姆级教程

目录 一、UniTask的简介和安装 https://github.com/Cysharp/UniTask.gitpathsrc/UniTask/Assets/Plugins/UniTask 空载性能测试 二、基础用法详解 三、基础用法扩展 四、进阶 五、VContainer简介 六、VContainer基础实例 方便快速查找 一、UniTask的简介和安装 项目地…

信息安全保障

文章目录 目录 文章目录 一.信息安全的定义 信息安全的概念 狭义的信息安全概念&#xff1a; 广义的信息安全问题&#xff1a; 信息系统安全问题的根源&#xff1a; 威胁情报 威胁情报的作用&#xff1a; 信息安全的特征 二.信息系统的属性 三.信息安全的视角 国家视角下的信…

Spring学习笔记——3

Spring学习笔记——3 一、AOP简介1.1、AOP概述1.2、AOP思想的实现方案1.3、模拟AOP的基础代码1.4、AOP的相关概念 二、基于XML配置的AOP2.1、XML方式AOP快速入门2.2、XML方式AOP配置详解2.3、XML方式AOP原理剖析 三、基于注解配置AOP3.1、注解方式AOP基本使用3.2、注解方式AOP配…

手写Spring:第15章-通过注解注入属性信息

文章目录 一、目标&#xff1a;通过注解注入属性信息二、设计&#xff1a;通过注解注入属性信息三、实现&#xff1a;通过注解注入属性信息3.1 工程结构3.2 自动扫描注入占位符配置和对象类图3.3 读取属性并填充到容器中3.3.1 定义解析字符串接口3.3.2 配置Bean工厂添加解析器3…

基于Java+SpringBoot+Vue前后端分离农产品直卖平台设计和实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

手写签名到背景上合为1张图

手写签名到背景上合为1张图 package.json中 "signature_pad": "3.0.0-beta.3"<template><div class"home"><canvas id"canvas" width"500" height"300"></canvas><button click"…

ELK高级搜索(三)

文章目录 11&#xff0e;索引Index入门11.1 索引管理11.2 定制分词器11.3 type底层结构11.4 定制dynamic mapping11.5 零停机重建索引 12&#xff0e;中文分词器 IK分词器12.1 Ik分词器安装使用12.2 ik配置文件12.3 使用mysql热更新 13&#xff0e;java api 实现索引管理14&…

026:vue中el-progress逆向倒计时方式显示

第026个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 &#xff08;1&#xff09;提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使…

Redis多机数据库实现

Redis多机数据库实现 为《Redis设计与实现》笔记 复制 客户端可以使用SLAVEOF命令将指定服务器设置为该服务器的主服务器 127.0.0.1:12345> SLAVEOF 127.0.0.1 6379127.0.0.1:6379将被设置为127.0.0.1:123456的主服务器 旧版复制功能的实现 Redis的复制功能分为同步&a…

Linux之history、tab、alias、命令执行顺序、管道符以及exit

目录 Linux之history、tab、alias、命令执行顺序、管道符以及exit history历史命令 格式 参数 修改默认记录历史命令条数 案例 案例1 --- 显示history历史记录中出现次数最高的top10 案例2 --- 增加history显示的时间信息 命令与文件名补全 --- tab 命令别名 格式 案…

MySQL事务管理

文章目录 MySQL事务管理0. MySQL的CURD不加控制&#xff0c;出现的问题1. 什么是事务2. 为什么会出现事务3. 事务的版本支持与提交方式3.1 版本支持3.2 提交方式 4. 事务的操作4.0 准备工作4.1 事务正常操作(1) 创建保存点后, rollback(2) 直接rollback(3) 正常提交 4.2 事务异…

学生免费申请IDEA使用流程

IntelliJ IDEA一般简称IDEA&#xff0c;是Java编程语言开发的集成环境&#xff0c;在业界被公认为最好的Java开发工具。 1 IDEA官网下载 1.1 官网地址 https://www.jetbrains.com/idea/ 1.2 IDEA下载 访问官网&#xff0c;单击download按钮&#xff0c;下载“IntelliJ IDE…

牛客练习赛115 A Mountain sequence

题目&#xff1a; 样例&#xff1a; 输入 3 5 1 2 3 4 5 3 3 3 3 3 1 2 1 输出 16 1 3 思路&#xff1a; 依据题意&#xff0c;再看数据范围&#xff0c;可以知道暴力肯定是不可能了&#xff0c;然后通过题目意思&#xff0c;我们可以排列模拟一下&#xff0c;这里排列所得结…

Vue+NodeJS上传图片到腾讯云Cos

一.前端Vue 1.选择图片 --HTML <input type"file" accept"image/*" change"handleFileChange"> <el-button size"large" click"changeAvatar">上传头像</el-button> //选择图片 function handleFileC…