问答

Ant Design4.0 Icon的使用问题

作者:admin 2021-08-02 我要评论

因为4.0是直接写Icon组件的名称,我想先定义好icon的名称然后循环渲染,如下图 但是渲染出来如下图都是字符串 标红的地方要怎么样才能在页面把Icon组件渲染出来...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

因为4.0是直接写Icon组件的名称,我想先定义好icon的名称然后循环渲染,如下图
image.png
但是渲染出来如下图都是字符串
image.png
标红的地方要怎么样才能在页面把Icon组件渲染出来啊,太难了救救我。。。。

###

icon: <MailOutlined />

去掉引号试试

###

写一个方法获取Icon

export const getIcon = string => {
    return {
        AuditOutlined:<AuditOutlined/>,
        AppstoreAddOutlined:<AppstoreAddOutlined/>,
        ContactsOutlined:<ContactsOutlined />,
        ControlOutlined:<ControlOutlined/>,
        FormOutlined:<FormOutlined/>,
        FileTextOutlined:<FileTextOutlined/>,
        HighlightOutlined:<HighlightOutlined/>,
        ProfileOutlined:<ProfileOutlined/>,
        TeamOutlined:<TeamOutlined/>,
        TagsOutlined:<TeamOutlined/>,
        CopyOutlined:<CopyOutlined/>,
        CheckCircleOutlined:<CheckCircleOutlined/>,
        ExclamationCircleOutlined:<ExclamationCircleOutlined/>,
        BlockOutlined:<BlockOutlined/>
    }[string]}

<MenuItem key={item.key} icon={getIcon(item.icon)}>{item.name}</MenuItem>
###

me too

###

这个这样写就行
icon: <HomeOutlined />
然后{item.icon}
然后就显示了

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • Ant Design4.0 Icon的使用问题

    Ant Design4.0 Icon的使用问题

  • table设置rowspan后设置宽度不起作用

    table设置rowspan后设置宽度不起作用

  • js数组问题

    js数组问题

  • 小程序列表跳转详情怎么获取当前行对象

    小程序列表跳转详情怎么获取当前行对象

腾讯云代理商
海外云服务器