Ant Design4.0 Icon的使用问题

Question

因为4.0是直接写Icon组件的名称，我想先定义好icon的名称然后循环渲染，如下图

但是渲染出来如下图都是字符串

标红的地方要怎么样才能在页面把Icon组件渲染出来啊，太难了救救我。。。。

Answer 1

icon: <MailOutlined />

去掉引号试试

Answer 2

写一个方法获取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>

Answer 3

me too

Answer 4

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