封装一个antd的Table操作项中的一个展开与收起通用功能

第一种方法,不使用任何插件和库 

import React, { useState, useEffect, SetStateAction, Dispatch } from 'react';  // 定义expandedKeys的类型  
type ExpandedKeysType = Set<string>;  // 自定义Hook:useExpandedKeys  
function useExpandedKeys(initialKeys: ExpandedKeysType): [ExpandedKeysType, (key: string) => void] {  const [expandedKeys, setExpandedKeys] = useState(initialKeys);  // 切换某个key的展开/收起状态  const toggleByKey: (key: string) => void = (key) => {  setExpandedKeys((prevKeys) => {  const newKeys = new Set(prevKeys);  if (newKeys.has(key)) {  newKeys.delete(key);  } else {  newKeys.add(key);  }  return newKeys;  });  };  // 使用useEffect来监听expandedKeys的变化  useEffect(() => {  // 这里可以执行依赖于expandedKeys的操作  console.log('Expanded keys have changed:', expandedKeys);  // 注意:这里的代码会在每次expandedKeys变化时执行  }, [expandedKeys]); // 当expandedKeys变化时,这个effect会重新运行  return [expandedKeys, toggleByKey];  
}  // 定义Item的类型  
type ItemType = {  id: string;  name: string;  
};  // 使用自定义Hook的的组件  
function MyComponent() {  // 使用自定义Hook,初始值为一个空的Set  const [expandedKeys, toggleByKey] = useExpandedKeys(new Set<string>());  // 假设有一个item列表,我们为每个item渲染一个按钮来切换其展开/收起状态  const items: ItemType[] = [  { id: 'item1', name: 'Item 1' },  { id: 'item2', name: 'Item 2' },  // ...其他items  ];  return (  <div>  {items.map((item) => (  <div key={item.id}>  <button onClick={() => toggleByKey(item.id)}>  {expandedKeys.has(item.id) ? '收起' : '展开'}  </button>  {expandedKeys.has(item.id) && <div>这里是{item.name}的展开内容</div>}  </div>  ))}  </div>  );  
}  export default MyComponent;

第二种方法,和第一种大同小异,只不过写法高级一些,并使用了额外的库和插件

import {useMap,useSet} from '@huse/collection';
import constate from 'constate';
import {Key,useCallback,useState} from 'react';export function useSetWithToggleAndAllChecked(){//存和当前全选状态相反的项的key// eg:已全展开时,存的是收起的项的keyconst [set,methods]=useSet<string>();const [allChecked,setAllChecked]=useState(false);const toggleByKey =useCallback(()=>{(key:string)=>{if(set.has(key)){methods.delete(key);}else {methods.add(key);}}},[set,methods]);const internalSetAllChecked=useCallback(()=>{(shouldAllChecked:boolean)=>{methods.clear();setAllChecked(shouldAllChecked);}},[set,methods,allChecked]);const checkIfExpandedByKey=useCallback(()=>{(key:string)=>{const has =set.has(key);if(allChecked){return !has;}else{return has;}}},[set,methods,allChecked]);return {set,methods:{toggleByKey,setAllChecked,internalSetAllChecked},isAllChecked:allChecked,checkoutExpandedByKey,}
};export const [ExpandedRowProvider,useAreAllRowsExpanded,useToggleRowsExpanded,useToggleRowExpandedByKey,useCheckIfExpandedByKey,
]=constate(useSetWithToggleAndAllChecked,value=>value.isAllChecked,value=>value.methods.setAllChecked,value=>value.methods.toggleByKey,value=>value.checkIfExpandedByKey,
)

 ExpandedRowProvider相当于提供一个conText上下文

//使用时,顶层组件
<ExpandedRowProvider>
</ExpandedRowProvider>
//这个key就是后端返回的Table列表数据的每一项key值,或者是id
const isExpanded = useCheckIfExpandedByKey()(key)
const toggleByKey = useToggleRowExpandedByKey();<a onClick={()=>toggleByKey(key)}>{isExpanded?'收起':'展开'}</a>

代码一下简洁了好多.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/3751.shtml

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

相关文章

Vue项目中异步组件的引入使用

要在Vue项目中引入异步组件&#xff0c;可以使用defineAsyncComponent函数&#xff08;在Vue 3中&#xff09;或者在组件的定义中使用动态import&#xff08;在Vue 2和Vue 3中都支持&#xff09;。 Vue 3 使用 defineAsyncComponent import { defineAsyncComponent } from vu…

vivado 创建和运行链路清扫

创建和运行链路清扫 要分析给定链路的裕度 &#xff0c; 利用不同 MGT 设置来多次运行链路扫描是很有效的。这样有助于判定最佳设置。 Vivado Serial I/O Analyzer 功能支持您定义、运行、保存和重新调用链路清扫 &#xff0c; 链路清扫是由多次链路扫描集合而成的。 每条…

HTML中的文档声明

前言 什么是<!DOCTYPE>&#xff1f;是否需要在 HTML5 中使用&#xff1f;什么是严格模式与混杂模式&#xff1f; 文档声明概念 HTML 文档通常以文档声明开始&#xff0c;该声明的作用是帮助浏览器确定其尝试解析和显示的 HTML 文档类型。 <!DOCTYPE html>文档声…

《AI聊天类工具之三——Bing新必应》

一.简介 官网:必应 Bing新必应(New Bing)是微软公司推出的一款结合了AI功能的在线服务平台,旨在为用户提供更丰富、个性化、可靠的搜索和服务体验。它不仅可以提供传统的网页、图片、视频、地图等搜索结果,还能通过聊天模式与用户进行自然语言交互,回答各种问题,甚至生…

【源码】Spring validation参数校验实现原理总结

Spring validation参数校验系列 1、Spring validation参数校验基本使用 2、Spring validation参数校验之自定义校验规则及编程式校验等进阶篇 3、【源码】Spring validation参数校验原理解析之Controller控制器参数校验中RequestBody参数校验实现原理 4、【源码】Spring va…

Allure精通指南(05)定制化报告内容(环境信息、图标、缺陷类别)

文章目录 Allure 自定义测试环境信息Allure 自定义缺陷类别信息Allure 自定义图标步骤一步骤二步骤三 Allure 自定义测试环境信息 步骤 1&#xff1a;创建 environment.properties 文件 在项目根目录或任何其他不会被--clean-alluredir参数影响的目录下创建 environment.proper…

【链表】Leetcode K个一组翻转链表

题目讲解 25. K 个一组翻转链表 算法讲解 虽然这道题是一道困难题&#xff0c;但是从代码层面很简单&#xff0c;只是一道简单的模拟&#xff1a;我们要先求出总共需要翻转的链表有多少组&#xff08;链表的长度 / k&#xff09;&#xff0c;接下来就是翻转k的链表最链接的问…

【Nginx】(一) Nginx全方位解析:特性、功能、优缺点及应用场景

Nginx概览 Nginx&#xff08;发音为“engine-x”&#xff09;是一款开源的高性能Web服务器和反向代理服务器&#xff0c;最初由俄罗斯开发者伊戈尔赛索耶夫开发。自从2004年发布以来&#xff0c;Nginx因其轻量级、高并发处理能力、稳定性以及丰富的功能集而广受欢迎。 Nginx有…

Tomcat安装步骤及详细配置教程(2022最新版)

网上的tomcat安装及配置教程一大堆&#xff0c;但是好多都过时了&#xff0c;根本不适用现在的版本&#xff0c;今天凯歌整理一篇Tomcat安装步骤及详细配置教程&#xff0c;2022年最新版~ Tomcat安装及配置教程主要分为四步&#xff1a; 步骤一&#xff1a;首先确认自己是否已…

【C++进阶之路】C++11(下) —— 线程库

序言 本篇文章主要是填之前C11留下的坑以及了解与熟悉线程库&#xff0c;有读者感兴趣之前的内容的话可见「C进阶之路」专栏中标题为「C11」的内容&#xff0c;废话不多说&#xff0c;先来概括一下本文的内容&#xff0c;首先我们会从历史的角度分别谈及Linux以及Windows下的线…

uniapp如何调起WhatsApp发送消息?

如何给WhatsApp发送消息&#xff1f; 通过点击链接发送 通过 a 标签&#xff0c;点击链接发送消息 <a href"https://wa.me/手机号?text内容"></a>// 例&#xff1a; <a href"https://wa.me/8562024899136?textHello"></a>通过…

JavaEE 初阶篇-深入了解 I/O 高级流(缓冲流、交换流、数据流和序列化流)

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 缓冲流概述 1.1 缓冲流的工作原理 1.2 使用缓冲流的步骤 1.3 字节缓冲流于字符缓冲流的区别 1.4 字节缓冲流的实例 1.5 字符缓冲流的实例 2.0 转换流概述 2.1 字符…

13-Makefile_04

使用函数 在更复杂的工程中&#xff0c;头文件、源文件可能会放在二级目录&#xff0c;为了实现这种操作通常需要使用Makefile的函数。 函数格式及示例 在Makefile中调用函数的方法跟变量的使用类似&#xff0c;以“$()”或“${}”符号包含函数名和参数&#xff0c;具体语法…

区块链技术与应用学习笔记(8-9节)——北大肖臻课程

目录 8.挖矿 对于全节点和轻节点思考问题&#xff1f; ①全节点在比特币的主要作用&#xff1f; ②挖矿时当监听到别人已经挖出区块并且延申了最长合法链此时应该立刻放弃当前区块在 本地重新组装一个指向最后这个新合法区块的候选区块&#xff0c;重新开始挖矿。节点这么做…

【C++】STL-vector的使用

目录 1、什么是vector&#xff1f; 2、vector的使用 2.1 vector的定义 ​编辑 2.2 遍历修改数据 2.3 迭代器 2.4 vector空间增长问题 2.5 vector的增删查改 3、迭代器失效 3.1 会引起其底层空间改变的操作&#xff0c;都有可能是迭代器失效 3.2 指定位置元素的删除操…

stable diffusion Temporal-kit和EbSynth视频转动画学习笔记

1、打开stable diffsuion webui 点击Temporal-kit 页签&#xff0c;再点击预处理pre-processing,上传视频 在工作目录下得到拆分的关键帧,在input目录里 打开图生图&#xff0c;输入正反描述词&#xff0c;其他配置如下 批量生成图片&#xff0c;找到最满意的那一张&#xff0…

【洛谷 P8615】[蓝桥杯 2014 国 C] 拼接平方数 题解(打表+循环+分支)

[蓝桥杯 2014 国 C] 拼接平方数 题目描述 小明发现 49 49 49 很有趣&#xff0c;首先&#xff0c;它是个平方数。它可以拆分为 4 4 4 和 9 9 9&#xff0c;拆分出来的部分也是平方数。 169 169 169 也有这个性质&#xff0c;我们权且称它们为&#xff1a;拼接平方数。 100…

python-opencv实现最近邻插值和双线性插值对图片上采样

使用背景 当我们需要把图像进行放大或者缩小的时候&#xff0c;第一反应是使用resize()实现。很多情况下&#xff0c;我们会调用最近邻插值和双线性插值去放大图片&#xff0c;当然要说没有分辨率的损失那是不可能的&#xff0c;只能说在放大图片的过程中尽可能增加了图片的分…

stm32开发之netxduo组件之mqtt客户端的使用记录

前言 1使用mqtt协议的简单示例记录 代码 MQTT服务端(C# 编写,使用MQTTnet提供的示例代码) 主程序 namespace ConsoleApp1;public class Program {public static async Task Main(string[] args){await Run_Server_With_Logging();}}public static async Task Run_Server_Wi…

js如何点击生成4位随机数

效果图&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>Generat…