react+antd配置动态路由中动态生成Icon结点

导入icon

import * as Icon from '@ant-design/icons';
const addIcon = (name)=>{
        return React.createElement(Icon[name]);
    }

routeConfig中icon值复制
react+antd配置动态路由中动态生成Icon结点_第1张图片

routesConfig内容

const routesConfig = [
    {
        path: '/',
        title: '首页',
        icon: 'HomeOutlined',
        exact: true
    }
]

动态配置路由

routesConfig.map((route, index)=>{
                                if(route.exact) {
                                    return (
                                        <Menu.Item key={index+route.title} icon={addIcon(route.icon)}>    
                                            <Link to={route.path} exact="true">{route.title}</Link>
                                        </Menu.Item>
                                    )
                                }else{

                                }
                            })

显示成功
react+antd配置动态路由中动态生成Icon结点_第2张图片

你可能感兴趣的:(react,react.js,javascript,前端)