antd - 常用封装方法之sliderEach

最新推荐文章于 2023-07-14 00:55:45 发布

success-ladder

最新推荐文章于 2023-07-14 00:55:45 发布

阅读量438

点赞数

分类专栏： antd

本文链接：https://blog.youkuaiyun.com/successLadder/article/details/101938337

版权

antd 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用 React 和 Ant Design 实现的菜单组件。该组件通过递归方式构建多级菜单结构，利用 SubMenu 和 Menu.Item 组件展示菜单项。支持图标和文本的组合显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React from "react";

import { Menu , Icon } from 'antd';
const { SubMenu } = Menu;

export default (routes) => {

    let fn = (child) => {

        return <SubMenu
            key={child.key}
            title={
                <span>
                    <Icon type={child.icon} />
                    <span>{child.name}</span>
                </span>
            }
        >
            {
                child.children.map((item,index) => {
                    if(item.children){
                        return fn(item);
                    }else{
                        return <Menu.Item key={item.key}>{item.name}</Menu.Item>
                    }
                })
            }
        </SubMenu>
    }

    return routes.map((item,index) => {
        if (item.children) {  //当它有子元素的时候,将它进行递归
            return fn(item)
        } else {  //当没有子元素的时候，直接输出
            return <Menu.Item key="2">
                <Icon type={item.icon} />
                <span>{item.name}</span>
            </Menu.Item>
        }
    })
}