用 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;

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