使用 antdesign实现菜单树

可以使用 antd 的 Tree 组件来实现菜单树，具体代码如下：

import { Tree } from 'antd';

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

function MenuTree() {
  return <Tree treeData={treeData} />;
}

export default MenuTree;

其中，`treeData` 是一个数组，用来表示菜单树的结构，每个节点包含 `title` 和 `key` 两个属性，`children` 属性表示该节点的子节点。在组件中，我们直接使用 `Tree` 组件，并将 `treeData` 作为参数传入即可。

注意，这里的代码只是一个简单的示例，实际使用时需要根据具体需求进行修改和优化。

相关问题

用 react ant design 实现菜单树

可以使用 Ant Design 的 Tree 组件来实现菜单树，具体实现可以参考以下代码：

import React from 'react';
import { Tree } from 'antd';

const { TreeNode } = Tree;

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

class MenuTree extends React.Component {
onSelect = (selectedKeys, info) => {
console.log('selected', selectedKeys, info);
};

renderTreeNodes = data =>
data.map(item => {
if (item.children) {
return (
<TreeNode title={item.title} key={item.key} dataRef={item}>
{this.renderTreeNodes(item.children)}
</TreeNode>
);
}
return <TreeNode {...item} />;
});

render() {
return (
<Tree onSelect={this.onSelect}>
{this.renderTreeNodes(treeData)}
</Tree>
);
}
}

export default MenuTree;

这是一个简单的菜单树组件，可以根据自己的需求进行修改和扩展。

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` 中，这样就可以将该节点的文本内容转换成一个可编辑的文本框。在失去焦点事件中，将编辑后的值保存到该节点中，并将文本框转换回文本内容。最后，通过递归渲染树形节点，实现了可编辑的菜单树。