基于antd Tree实现可编辑菜单树：支持节点新增、删除

在前端开发中，有时候我们需要实现一个可编辑的菜单树结构。这不仅要求树形结构能够展示给用户，还需要用户能够方便地添加、删除节点。在这里，我们将使用antd的Tree组件以及React和JavaScript来实现这个功能。
首先，确保你已经在项目中安装了antd和react-beautiful-dnd库。你可以使用npm或yarn进行安装：

npm install antd react-beautiful-dnd
# 或者
yarn add antd react-beautiful-dnd

接下来，我们创建一个新的React组件来作为可编辑的树形菜单。这个组件将使用antd的Tree组件来展示树形结构，并使用react-beautiful-dnd库来实现拖拽功能。
在编辑模式下，用户可以点击节点旁边的“编辑”按钮来修改节点名称。同时，我们还添加了“删除”按钮，允许用户删除节点。
首先，我们需要创建一个Tree组件，并在其中定义节点数据。这里我们使用一个简单的数组来模拟节点数据：

import React, { useState } from 'react';
import { Tree } from 'antd';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
const initialTreeData = [
{ title: '节点1', key: '0-0', children: [{ title: '子节点1', key: '0-0-0' }] },
{ title: '节点2', key: '0-1' },
];
const EditableTree = () => {
const [treeData, setTreeData] = useState(initialTreeData);
const [editKey, setEditKey] = useState(null);
const [newNodeTitle, setNewNodeTitle] = useState('');
const [isEditing, setIsEditing] = useState(false);

接下来，我们需要处理用户交互事件。当用户点击“编辑”按钮时，我们将进入编辑模式，并显示一个输入框供用户输入新名称。当用户完成输入后，我们更新节点名称并将编辑模式关闭。如果用户点击“新增”按钮，我们将创建一个新的节点并将其添加到树形结构中。如果用户点击“删除”按钮，我们将从树形结构中删除该节点。
在useDrag和useDrop两个hook中，我们定义了拖拽和放置的逻辑。当用户拖拽一个节点时，我们将更新该节点的位置。当用户放置一个节点时，我们将更新树形结构。
为了使编辑操作更加直观，我们使用了一个简单的模态对话框来显示输入框和确认按钮。当用户点击“确认”按钮时，我们将更新树形结构并将模态对话框关闭。如果用户在编辑模式下点击其他地方，我们将关闭模态对话框并保持原状不变。

// 省略部分代码...
}