前端实现展开收起的效果 (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.rhkb.cn/news/126872.html

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

相关文章

C++——特殊类设计

C——特殊类设计 文章目录 C——特殊类设计特殊类设计一个类不能被拷贝设计一个类只能在堆上创建设计一个类只能在栈上创建设计一个类不能被继承 单例模式饿汉模式懒汉模式 特殊类 设计一个类不能被拷贝 拷贝只会放在两个场景&#xff0c;其一是拷贝构造函数&#xff0c;其二是…

Rocky(Centos)安装中文字体(防止中文乱码)

1、查看字体列表 运行下列命令 fc-list 若出现&#xff0c;下面截图&#xff0c;则需要安装字体管理软件 安装字体库&#xff0c;运行&#xff1a; yum -y install fontconfig 当看到下图的提示信息时说明已安装成功&#xff1a; 二、添加中文字体 1&#xff09;window…

python实现adb辅助点击屏幕工具

#!/usr/bin/env python # -*- coding: utf-8 -*-import re import os import time import subprocess import tkinter as tk from tkinter import messagebox from PIL import Image, ImageTk# 设置ADB路径&#xff08;根据你的系统和安装路径进行调整&#xff09; ADB_PATH C…

centos+jenkins+pycharm

思路&#xff1a;架构 一. 在centos上搭建jenkins环境 二. pycharm与gitee建立连接 三. 访问jenkins&#xff0c;添加任务 3.1 添加一个自由风格的任务 3.2 添加git项目路径及访问git的账号和密码 3.3 执行start.sh脚本 四. 浏览器访问jenkins执行任务

MySQL--MySQL表的增删改查(基础)

排序&#xff1a;ORDER BY 语法&#xff1a; – ASC 为升序&#xff08;从小到大&#xff09; – DESC 为降序&#xff08;从大到小&#xff09; – 默认为 ASC SELECT … FROM table_name [WHERE …] ORDER BY column [ASC|DESC], […]; *** update

半导体制造工艺(一)光刻

在这里开个新专题&#xff0c;主要详细描述半导体制造整个流程中所用到的设备工艺步骤。 在集成电路制造工艺中&#xff0c;光刻是决定集成器件集成度的核心工序&#xff0c;该工序的作用是将图形信息从掩模版&#xff08;也称掩膜版&#xff09;上保真传输、转印到半导体材料衬…

深度解析自然语言处理之篇章分析

在本文中&#xff0c;我们深入探讨了篇章分析的概念及其在自然语言处理&#xff08;NLP&#xff09;领域中的研究主题&#xff0c;以及两种先进的话语分割方法&#xff1a;基于词汇句法树的统计模型和基于BiLSTM-CRF的神经网络模型。 关注TechLead&#xff0c;分享AI全维度知识…

编译OpenWrt内核驱动

编译OpenWrt内核驱动可以参考OpenWrt内部其它驱动的编写例程&#xff0c;来修改成自己需要的驱动 一、OpenWrt源代码获取与编译 1.1、搭建环境 下载OpenWrt的官方源码&#xff1a; git clone https://github.com/openwrt/openwrt.git1.2、安装编译依赖项 sudo apt update -…

Web of Science怎么用有哪些功能

Web of Science你不可不知道的数据库。作为全球最大的学术搜索引擎之一&#xff0c;Web of Science涵盖了众多学科领域&#xff0c;为科研人员提供了全面、高品质的学术资源。本文将详细介绍Web of Science的主要功能及使用步骤&#xff0c;希望可以帮助您更好地利用这一强大的…

杭州高职画室哪家好?如何选择高职画室?高职美术学习选哪家画室?

随着越来越多的画室开始涉足高职美术培训&#xff0c;根据杭州高职画室的美术学生及其家长所知&#xff0c;由于普通高中和高职联考之间存在巨大差异&#xff0c;因此许多普通高中的画室的高职班并未取得太大的成功。因此&#xff0c;小编为正在寻找画室的你提供介绍&#xff1…

QTday5(QT连接TCP通信)

一、Xmind整理&#xff1a; C语言中的通信协议&#xff1a; 二、上课笔记整理&#xff1a; 1.QT中的服务器端的操作&#xff1a; .pro文件&#xff1a; 头文件&#xff1a; #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTcpServer> //服务…

设计模式 - 责任链

一、前言 ​ 相信大家平时或多或少都间接接触过责任链设计模式&#xff0c;只是可能有些同学自己不知道此处用的是该设计模式&#xff0c;比如说 Java Web 中的 Filter 过滤器&#xff0c;就是非常经典的责任链设计模式的例子。 那么什么是责任链设计模式呢&#xff1f; ​ …

Android studio 实现生成二维码和扫描二维码

效果图 build.gradle(:app)添加依赖 dependencies {implementation com.google.zxing:core:3.3.3implementation com.journeyapps:zxing-android-embedded:3.6.0implementation com.google.zxing:javase:3.0.0 }Manifests.xml <uses-permission android:name"android…

FastStone Capture

FastStone Capture 简介下载安装注册 简介 FastStone Capture是一款用于屏幕截图和屏幕录制的工具。它允许用户捕捉屏幕上的内容&#xff0c;并将其保存为图像文件&#xff0c;还可以录制屏幕活动为视频文件。 FastStone Capture官网: https://www.faststone.org/FSCaptureDet…

手写Spring:第2章-创建简单的Bean容器

文章目录 一、目标&#xff1a;创建简单的Bean容器二、设计&#xff1a;创建简单的Bean容器三、实现&#xff1a;创建简单的Bean容器3.0 引入依赖3.1 工程结构3.2 创建简单Bean容器类图3.3 Bean定义3.4 Bean工厂 四、测试&#xff1a;创建简单的Bean容器4.1 用户Bean对象4.2 单…

go-zero直连与etcd服务注册中心

go-zero中直连方式 在使用grpc是最重要的就是pb文件了&#xff0c;生成的pb文件&#xff0c;通过pb文件可以生成grpc的客户端和服务端&#xff0c;那么客户端和服务端就可以直连了&#xff0c;再次基础上可以引入etcd实现服务注册。 所有的代码都需要开发者编写&#xff0c;包…

Stable Diffuse 之 本地环境部署 WebUI 进行汉化操作

Stable Diffuse 之 本地环境部署 WebUI 进行汉化操作 目录 Stable Diffuse 之 本地环境部署 WebUI 进行汉化操作 一、简单介绍 二、汉化操作 附录&#xff1a; 一、Install from URL 中出现 Failed to connect to 127.0.0.1 port 7890: Connection refused 错误&#xf…

基于微信小程序美食菜品预订点餐预约系统uniapp+vue

点餐预约系统主要是为了提高用户的工作效率和更方便快捷的满足用户&#xff0c;更好存储所有数据信息及快速方便的检索功能&#xff0c;对点餐预约系统的各个模块是通过许多今天的发达点餐预约系统做出合理的分析来确定考虑用户的可操作性&#xff0c;遵循开发的系统优化的原则…

网络安全概述

从今天开始&#xff0c;我将开启一个网络安全的小课堂&#xff0c;分享一些网络安全方面的相关知识点&#xff0c;大家可以一起学习&#xff0c;争取对网络安全、网络攻防有一定的认识&#xff0c;今天是第一讲网络安全概述&#xff0c;来简单介绍一下网络安全。 1 网络安全的…

数据结构零基础入门篇(C语言实现)

前言&#xff1a;数据结构属于C学习中较难的一部分&#xff0c;对应学习者的要求较高&#xff0c;如基础不扎实&#xff0c;建议着重学习C语言中的指针和结构体&#xff0c;万丈高楼平地起。 目录&#xff1a; 一&#xff0c;链表 1&#xff09;单链表的大致结构实现 2&…