antd 5X中 tree属性结构,自定义菜单,右键菜单实现方式

第一种方式

  • 使用自定义渲染节点 titleRender
 <TreetitleRender={titleRender}autoExpandParent={autoExpandParent}fieldNames={fieldNames}treeData={treeData}></Tree>
重要代码
titleRender实现方式
const menu = (<Menuitems={[{key: 'add',label: <span>新增</span>,},{key: 'delete',label: <span>删除</span>,},{key: 'update',label: <span>编辑</span>,},]}/>);//   自定义节点渲染const titleRender = (nodeData: any) => {return (<Dropdown overlay={menu} trigger={['contextMenu']}><div>{nodeData.name}SB</div></Dropdown>);};相当于每一个节点就是<Dropdown overlay={menu} trigger={['contextMenu']}><div>{nodeData.name}SB</div></Dropdown>这个组件 

另外一种方式

index.tsxconst treeRightMenu = {menuId: '1',items: [{ key: 'add', name: '添加同级节点', handler: (props: any) => { handleItemClick('add', props)}},{ key: 'edit', name: '修改此节点', handler: (props: any) => { handleItemClick('edit', props)}},{ key: 'addSub', name: '添加子节点', handler: (props: any) => { handleItemClick('addSub', props)}},{ key: 'del', name: '添加此节点', handler: (props: any) => { handleItemClick('del', props)}},],};<TreeRightdataSource={treeData}contextMenu={treeRightMenu}onSelect={handleSelect}/>treeright.tsx
// components/TreeRight.tsximport { Tree } from 'antd';
import { Menu, Item, useContextMenu } from 'react-contexify';
import 'react-contexify/dist/ReactContexify.min.css';type TreeRightProps = {dataSource: any[];contextMenu: any;onSelect: (selectedKeys: any, info: any ) => void;
};// const MENU_ID = '1';
const TreeRight: React.FC<TreeRightProps> = (props) => {const { dataSource, contextMenu, onSelect} = props;// 右键菜单const ContextMenu = () => (<Menu id={contextMenu.menuId}>{contextMenu.items.map((item: any) => (// 这里需要加key,不然要报错<Item key={item.key} onClick={item.handler}>{item.name}</Item>))}</Menu>);const { show } = useContextMenu({id: contextMenu.menuId,});// 右键显示菜单const handleContextMenu = (event: any, node: any) => {event.preventDefault();show(event,{props: node,});}return (<div><TreeautoExpandParentdefaultExpandAlldefaultExpandParenttreeData={dataSource}onSelect={onSelect}// 右键事件onRightClick={({event, node}: any) => {handleContextMenu(event, node)}}/><ContextMenu /></div>);
};export default TreeRight;

值得一提React Contexify 是一个用于在 React 应用中创建上下文菜单(右键菜单)的开源库。它允许开发者轻松地在任何 React 组件中添加自定义的上下文菜单,提供了丰富的 API 和事件处理机制,使得上下文菜单的创建和管理变得简单高效。
npm install react-contexify 你需要通过 npm 或 yarn 安装

简单使用实例
import React from 'react';
import { Menu, Item, useContextMenu } from 'react-contexify';
import 'react-contexify/dist/ReactContexify.css';const MENU_ID = 'menu_id';function App() {const { show } = useContextMenu({id: MENU_ID,});const handleItemClick = ({ event, props, trigger }) => {console.log('Item clicked', props, trigger);};return (<div><div onContextMenu={show}>Right click here</div><Menu id={MENU_ID}><Item onClick={handleItemClick}>Item 1</Item><Item onClick={handleItemClick}>Item 2</Item></Menu></div>);
}export default App;

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

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

相关文章

flume系列之:flume机器做条带划分提高磁盘性能和吞吐量的详细步骤

flume系列之:flume机器做条带划分提高磁盘性能和吞吐量的详细步骤 磁盘条带划分新磁盘直接条带划分步骤有数据的磁盘做条带划分步骤磁盘条带划分 磁盘条带划分是将一个文件或数据块分散存储在多个物理磁盘上的技术。它可以提高磁盘的性能和吞吐量。以下是磁盘做了条带划分后可…

六、栈————相关算法探讨(持续更新中)

栈————相关算法探讨 前言一、有效的括号1.1 思路分析1.2 解法探讨1.2.1 一次 for 循环&#xff0c;左括号入栈1.2.2 一次 for 循环&#xff0c;左括号入栈&#xff08;使用字典&#xff09;1.2.3 一次 for 循环&#xff0c;右括号进栈1.2.4 一次 for 循环&#xff0c;右括号…

【日常记录-Java】Windows下查看Java进程完整的启动命令

1. 简介 jps是Java Virtual Machine Process Status Tool的缩写&#xff0c;其会列出所有正在运行的Java进程ID以及类名。 wmic是Windows Management Instrumentation Command-line的缩写&#xff0c;其允许用户与wmi服务进行交互&#xff0c;提供了一种标准化的方法来访问和操…

ctfshow(151->154)--文件上传漏洞--.user.ini

Web151 进入界面&#xff1a; 审计&#xff1a; 提示是前台校验。 存在图片上传。 思路&#xff1a; 先编写一个一句话木马文件&#xff1a; //shell.php <?php eval($_POST[1]); ?>既然是前端校验&#xff0c;我们查看页面源代码找到相关的校验内容&#xff1a…

Ubuntu使用Tesla P4配置Anaconda+CUDA+PyTorch

我们之前测试了在Windows系统如何安装Tesla M4&#xff08;成了&#xff01;Tesla M4Windows 10AnacondaCUDA 11.8cuDNNPython 3.11&#xff09;&#xff0c;前面安装好了Ubuntu 22.04.4的操作系统&#xff08;Ubuntu 22.04.4安装Docker引擎&#xff09;。今天&#xff0c;简单…

少儿编程参培意愿地图:一二线城市热情高涨,低线城市市场待挖掘

随着少儿编程的普及&#xff0c;编程教育逐渐走进越来越多家庭。然而&#xff0c;少儿编程的地域分布显示出明显的差异&#xff1a;在一二线城市中&#xff0c;家长对少儿编程的接受度和参与度显著高于低线城市。本文将通过对地域分布和家长态度的分析&#xff0c;探讨少儿编程…

基于SSM演出道具租赁系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;商家管理&#xff0c;道具类型管理&#xff0c;道具出租管理&#xff0c;租赁订单管理&#xff0c;道具归还管理&#xff0c;系统管理 商家账号功能包括&#xff1a;系统首页&…

【Spring】Spring 核心和设计思想

Spring 核心和设计思想 1.什么是 Spring1.1 传统程序开发1.2 控制反转程序开发 2.理解 Spring IoC 1.什么是 Spring 我们通常所说的 Spring 指的是 Spring Framework&#xff08;Spring 框架&#xff09;&#xff0c;它是⼀个开源框架&#xff0c;有着活跃而庞大的社区&#x…

【Java】-- 内部类

文章目录 1. 静态内部类&#xff08;重要&#xff09;2. 实例内部类&#xff08;重要&#xff09;3. 局部内部类&#xff08;很少用&#xff09;4. 匿名内部类&#xff08;使用较多&#xff09;4.1 第一种写法&#xff08;类&#xff09;4.1 第二种写法&#xff08;接口) 当一个…

【C语言学习笔记】

C语言发展史&#xff1a; 1960 原型A语言->ALGOL语言 1963 CPL语言1967 BCPL1970 B语言1973 C语言 C语言特点&#xff1a; 基础性语言语法简洁 紧凑 方便 灵活(得益于指针)运算符 数据结构丰富结构化 模块化编程移植性好 执行效率…

STL学习-无序容器-unordered set和unorderde multiset

1.定义及初始化 #include <unordered set> #include <iostream> using namespace std; //输出s中的所有元素 template<typename T> void Show(const T& s) { for(auto&x:s) cout << x<<" ";cout << endl; } int main()…

docker-高级(待补图)

文章目录 数据卷(Volume)介绍查看方法删除方法绑定方法匿名绑定具名绑定Bind Mount 数据卷管理 网络bridge(桥接模式 默认)HOST(主机模式)Nonecontainer(指定一个容器进行关联网络共享)自定义(推荐)docker network 命令创建网络docker network create 实例展示-自定义实例展示-…

玩转Docker | Docker基础入门与常用命令指南

玩转Docker | Docker基础入门与常用命令指南 引言基本概念help帮助信息常用命令管理镜像运行容器构建镜像其他Docker命令整理结语引言 Docker 是一种开源的应用容器引擎,它允许开发者将应用程序及其依赖打包进一个可移植的容器中,然后发布到任何流行的 Linux 机器上。这大大简…

基于SSM医药进出口交易系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;商品信息管理&#xff0c;仓储部门管理&#xff0c;供应部门管理&#xff0c;业务部门管理&#xff0c;客户管理&#xff0c;财务部管理 业务部门账号功能包括&#xff1a;系统首页&#xff0c;个人中…

2024年大湾区杯粤港澳金融数学建模赛题浅析——助攻快速选题

一图流 赛题难度 A:B2:1 选题人数 A:B2:3 A题&#xff1a;证券市场投资风险控制模型设计 问题简述 随着金融市场的发展&#xff0c;系统性风险的管理变得越来越重要。本题要求通过量化方法测度和监测系统性风险&#xff0c;设计风险计量指标&#xff0c;并基于这些指标构建预…

胡壮麟《语言学教程》第五版PDF英文版+中文版翻译

胡壮麟《语言学教程》中文版&#xff1a;https://pan.quark.cn/s/9491130ec572 《语言学教程》&#xff08;英文版&#xff09;是一部经典的语言学教材&#xff0c;自 1988 年面世以来&#xff0c;被众多高校广泛采用&#xff0c;长销不衰。该教材自出版以来不断修订&#xff…

在浏览器和Node.js环境中使用Puppeteer的Rollup与Webpack打包指南

Puppeteer是一个Node.js库&#xff0c;它提供了一套高级API来通过DevTools协议控制Chrome或Chromium。虽然Puppeteer通常在服务器端使用&#xff0c;但有时你可能需要在浏览器环境中使用它的某些功能。本文将介绍如何使用Rollup和Webpack来打包包含Puppeteer或其轻量级版本Pupp…

C# 如何处理 WebSocket 连接异常

在 C# 中使用 WebSocket 进行通信时&#xff0c;处理连接异常是确保应用程序稳定性和可靠性的重要环节。本文将详细介绍如何在 C# 中有效地处理 WebSocket 连接异常&#xff0c;并附带代码示例进行拆分讲解。 一、理解 WebSocket 连接异常 WebSocket 连接可能会由于多种原因出现…

基于Pycharm和Django模型技术的数据迁移

1.配置数据库 在trip_server/settings.py中修改配置&#xff1a; 其格式可访问官网&#xff1a;Settings | Django documentation | Django 1.1 配置数据库 文件地址&#xff1a;trip_server/settings.py 配置前需要创建&#xff08;NaviCat&#xff09;个人数据库 "…

java访问华为网管软件iMaster NCE的北向接口

最近做的一个项目&#xff0c;需要读取华为一个叫iMaster NCE的网管软件的北向接口。这个iMaster NCE&#xff08;以下简称NCE&#xff09;用于管理项目的整个网络&#xff0c;尤其是光网络。业主要求我们访问该软件提供的对外接口&#xff0c;读取一些网络信息&#xff0c;比如…