antdesign Tree实现可编辑菜单树

Ant Design Tree 组件提供了一个 `treeData` 属性，通过这个属性可以渲染出一棵树形结构。要实现可编辑的菜单树，需要在这个属性的基础上进行一些扩展。

首先，需要为每个节点添加一个可编辑的标识，用来表示该节点是否可以编辑。可以在 `treeData` 中为每个节点添加一个 `editable` 属性。

其次，当用户点击一个节点时，需要判断该节点是否可编辑，如果可编辑，则将该节点的文本内容转换成一个可编辑的文本框，让用户进行编辑。

最后，当用户完成编辑后，需要将编辑后的值保存到该节点中，并且将文本框转换回文本内容。

下面是一个简单的示例代码：

import { Tree, Input } from 'antd';
import { useState } from 'react';

const { TreeNode } = Tree;

const treeData = [
  {
    title: 'Node 1',
    key: '1',
    editable: true,
    children: [
      {
        title: 'Child Node 1',
        key: '1-1',
        editable: true,
      },
      {
        title: 'Child Node 2',
        key: '1-2',
        editable: true,
      },
    ],
  },
  {
    title: 'Node 2',
    key: '2',
    editable: true,
  },
];

const EditableTree = () => {
  const [editingKey, setEditingKey] = useState('');

  const onDoubleClick = (event, node) => {
    if (node.editable) {
      setEditingKey(node.key);
    }
  };

  const onBlur = (event, node) => {
    setEditingKey('');
    node.title = event.target.value;
  };

  const renderTreeNode = (node) => {
    const { title, key, editable, children } = node;
    if (editingKey === key) {
      return (
        <TreeNode title={<Input defaultValue={title} onBlur={(event) => onBlur(event, node)} />} key={key} />
      );
    }
    return (
      <TreeNode title={title} key={key} editable={editable}>
        {children && children.map(renderTreeNode)}
      </TreeNode>
    );
  };

  return (
    <Tree showLine defaultExpandAll onDoubleClick={onDoubleClick}>
      {treeData.map(renderTreeNode)}
    </Tree>
  );
};

export default EditableTree;

这段代码中，我们使用了 Ant Design 的 `Tree` 和 `Input` 组件，使用 `useState` 钩子保存了当前正在编辑的节点的 `key` 值。在双击事件中，如果该节点可编辑，则将该节点的 `key` 值保存到 `editingKey` 中，这样就可以将该节点的文本内容转换成一个可编辑的文本框。在失去焦点事件中，将编辑后的值保存到该节点中，并将文本框转换回文本内容。最后，通过递归渲染树形节点，实现了可编辑的菜单树。