【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

相关文章

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

SpringBoot集成Milvus实现数据增删改查功能

《SpringBoot集成Milvus实现数据增删改查功能》milvus支持的语言比较多,支持python,Java,Go,node等开发语言,本文主要介绍如何使用Java语言,采用springboo... 目录1、Milvus基本概念2、添加maven依赖3、配置yml文件4、创建MilvusClient

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

SpringMVC获取请求参数的方法

《SpringMVC获取请求参数的方法》:本文主要介绍SpringMVC获取请求参数的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下... 目录1、通过ServletAPI获取2、通过控制器方法的形参获取请求参数3、@RequestParam4、@

SpringValidation数据校验之约束注解与分组校验方式

《SpringValidation数据校验之约束注解与分组校验方式》本文将深入探讨SpringValidation的核心功能,帮助开发者掌握约束注解的使用技巧和分组校验的高级应用,从而构建更加健壮和可... 目录引言一、Spring Validation基础架构1.1 jsR-380标准与Spring整合1