antd Tree 组件怎么用onContextMenu

Antd Tree 组件支持 `onRightClick` 方法用于处理右键菜单事件。你可以在这个方法中创建一个自定义的菜单并在需要的时候显示它。下面是一个例子： ```jsx import React from 'react'; import { Tree, Menu, message } from 'antd'; import { FileOutlined } from '@ant-design/icons'; const { TreeNode } = Tree; class MyComponent extends React.Component { handleRightClick = ({ event, node }) => { // 阻止默认的右键菜单事件 event.preventDefault(); // 创建一个菜单 const menu = ( <Menu> <Menu.Item> 菜单项 1 </Menu.Item> <Menu.Item> 菜单项 2 </Menu.Item> <Menu.Item> 菜单项 3 </Menu.Item> </Menu> ); // 显示菜单 menu.popup({ x: event.clientX, y: event.clientY, }); // 监听菜单项的点击事件 menu.items.forEach((item) => { item.onClick = () => { // 在这里执行菜单项的操作 message.info(`你点击了菜单项 ${item.props.children}`); }; }); } renderTreeNodes = (data) => { return data.map((item) => { if (item.children) { return ( <TreeNode title={item.title} key={item.key} icon={<FileOutlined />}> {this.renderTreeNodes(item.children)} </TreeNode> ); } return <TreeNode {...item} icon={<FileOutlined />} />; }); }; render() { const treeData = [ { title: '节点1', key: '1', children: [ { title: '子节点1', key: '1-1', }, { title: '子节点2', key: '1-2', }, ], }, { title: '节点2', key: '2', children: [ { title: '子节点1', key: '2-1', }, { title: '子节点2', key: '2-2', }, ], }, ]; return ( <Tree onRightClick={this.handleRightClick}> {this.renderTreeNodes(treeData)} </Tree> ); } } ``` 在这个例子中，`handleRightClick` 方法创建了一个包含三个菜单项的菜单，并在需要的时候显示它。菜单的位置基于鼠标事件的 `clientX` 和 `clientY` 属性进行设置。菜单项的点击事件被监听，并在点击时执行自定义操作。另外，菜单之外的任何地方的点击事件都会关闭菜单。你可以通过修改菜单项的操作来实现你自己的需求。