【React 】折叠面板,点击展开时再请求数据

2024-06-20 14:52

本文主要是介绍【React 】折叠面板,点击展开时再请求数据,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

需求背景:使用折叠面板的形式展示数据,面板内部数据需要在打开时请求接口获取。

遇到问题:最开始使用Antd 的折叠面板组件,它对于数据直接渲染是没问题的,但是不好满足打开面板时再动态加载数据的需求,于是自己手写了一个。

效果展示(已脱敏):
在这里插入图片描述

话不多说,以下是手写的组件代码:

面板的header 内容结构可以根据自己需要调整

/* eslint-disable @typescript-eslint/no-unused-vars */
import { DownOutlined, RightOutlined } from '@ant-design/icons';
import { Col, Row } from 'antd';
import { useRef, useState } from 'react';
import './style.less';
// 内容
import TableList from './TableList';/** ===================================* @names: 自定义折叠面板业务组件* @description:* @author:* @date: 2024-06-20*======================================*/export default function CollapseList(props: any) {const [active, setActive] = useState(false);const tableRef = useRef<any>();return (<div className="collapse-item"><div className="collapse-item-header"><Row><Col span={12}><div>test</div></Col><Col span={8}><div>2022-06-20</div></Col><div className="expand">{!active ? (<divclassName="expandIconCpe"onClick={() => {setActive(!active);// 点击展开时调用子组件加载数据的方法请求tableRef.current?.handleGetData();}}>展开<RightOutlined /></div>) : (<divclassName="expandIconCpe"onClick={() => {setActive(!active);}}>收起<DownOutlined /></div>)}</div></Row></div><divclassName={active ? 'collapse-item-content-active' : 'collapse-item-content-hide'}>{/* 面板内容,可以自定义,我这里是封装了一个表格组件 用ref绑定 */}<TableList ref={tableRef} /></div></div>);
}

样式css:

.collapse-item {border-bottom: 1px solid rgba(5, 5, 5, 6%);border-radius: unset;.collapse-item-header {position: relative;padding: 12px 16px;color: rgba(0, 0, 0, 88%);cursor: pointer;.expand {font-size: 12px;position: absolute;right: 16px;}.expandIconCpe {color: #0065ff !important;}}.collapse-item-content-hide {display: none;}.collapse-item-content-active {display: block;background-color: #fff;}.ant-table-tbody > tr:last-child > td {border-bottom: none;}.ant-row {flex-wrap: nowrap;word-break: break-all;}
}

面板内容组件中写接口请求,使用 forwardRef + useImperativeHandle让父组件调用子组件的方法。

核心代码:


import { forwardRef, useImperativeHandle} from 'react';interface TableRef {handleGetData: (params: any) => void;
}
const TableList = forwardRef<TableRef>((props, ref) => {// 子组件中useImperativeHandle(ref, () => ({// handleGetData是暴露给父组件的方法handleGetData: (params: any) => {// 这里可以自定义封装接口请求,然后渲染数据},}));
})export default TableList;

Tips:
为了提高性能,不让每次点击展开都去发起请求,可以在请求成功一次结果后,设置一个标记,下次再点击展开时,判断如果已经标记请求成功过了,就不发起请求,展示上一次结果。

这篇关于【React 】折叠面板,点击展开时再请求数据的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1078447

相关文章

Java利用JSONPath操作JSON数据的技术指南

《Java利用JSONPath操作JSON数据的技术指南》JSONPath是一种强大的工具,用于查询和操作JSON数据,类似于SQL的语法,它为处理复杂的JSON数据结构提供了简单且高效... 目录1、简述2、什么是 jsONPath?3、Java 示例3.1 基本查询3.2 过滤查询3.3 递归搜索3.4

MySQL大表数据的分区与分库分表的实现

《MySQL大表数据的分区与分库分表的实现》数据库的分区和分库分表是两种常用的技术方案,本文主要介绍了MySQL大表数据的分区与分库分表的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有... 目录1. mysql大表数据的分区1.1 什么是分区?1.2 分区的类型1.3 分区的优点1.4 分

Mysql删除几亿条数据表中的部分数据的方法实现

《Mysql删除几亿条数据表中的部分数据的方法实现》在MySQL中删除一个大表中的数据时,需要特别注意操作的性能和对系统的影响,本文主要介绍了Mysql删除几亿条数据表中的部分数据的方法实现,具有一定... 目录1、需求2、方案1. 使用 DELETE 语句分批删除2. 使用 INPLACE ALTER T

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash?1.1

SpringBoot使用OkHttp完成高效网络请求详解

《SpringBoot使用OkHttp完成高效网络请求详解》OkHttp是一个高效的HTTP客户端,支持同步和异步请求,且具备自动处理cookie、缓存和连接池等高级功能,下面我们来看看SpringB... 目录一、OkHttp 简介二、在 Spring Boot 中集成 OkHttp三、封装 OkHttp

Redis 中的热点键和数据倾斜示例详解

《Redis中的热点键和数据倾斜示例详解》热点键是指在Redis中被频繁访问的特定键,这些键由于其高访问频率,可能导致Redis服务器的性能问题,尤其是在高并发场景下,本文给大家介绍Redis中的热... 目录Redis 中的热点键和数据倾斜热点键(Hot Key)定义特点应对策略示例数据倾斜(Data S

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

Python实现将MySQL中所有表的数据都导出为CSV文件并压缩

《Python实现将MySQL中所有表的数据都导出为CSV文件并压缩》这篇文章主要为大家详细介绍了如何使用Python将MySQL数据库中所有表的数据都导出为CSV文件到一个目录,并压缩为zip文件到... python将mysql数据库中所有表的数据都导出为CSV文件到一个目录,并压缩为zip文件到另一个

SpringBoot整合jasypt实现重要数据加密

《SpringBoot整合jasypt实现重要数据加密》Jasypt是一个专注于简化Java加密操作的开源工具,:本文主要介绍详细介绍了如何使用jasypt实现重要数据加密,感兴趣的小伙伴可... 目录jasypt简介 jasypt的优点SpringBoot使用jasypt创建mapper接口配置文件加密