React 16.3, Antd 4.2, 侧边栏的 Icon 由后端返回，Icon显示问题

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80

import React, { Component } from 'react'; import { withRouter, RouteComponentProps } from 'react-router-dom'; import { Layout, Menu } from 'antd';// 模拟后端返回路由 import Route, { IFMenu } from '../../router/config'; import { Link } from 'react-router-dom'; import * as Icon from '@ant-design/icons';   const { SubMenu } = Menu; const { Sider } = Layout;   type SiderCustomProps = RouteComponentProps<any> & {   collapsed?: boolean }   type SiderCustomState = {   Logo: string,   Icons: any }   class SiderCustom extends Component<SiderCustomProps, SiderCustomState> {     constructor(props: any) {     super(props)     this.state = {       Icons: Icon     }   }     /* 需要注意的点   ·1.Icons，因需要后端配置图标，但and-design4.0以上版本将icon做成了引用加载，可将Icon传入state进行赋值   */   renderMenuItem = (item: IFMenu) => {     let icons: any = this.state.Icons[item.icon];       return (       <Menu.Item key={item.path}>         <Link to={item.path + (item.query || '')}>           {React.createElement(icons, {             className: 'icon',           })}           <span className="nav-text">{item.title}</span>         </Link>       </Menu.Item>     )   }     /* 父级 */   renderSubMenu = (item: IFMenu) => (     <SubMenu key={item.path} title={item.title}>       {         item.child!.map((val) => (           val.child ? this.renderSubMenu(val) :             this.renderMenuItem(val)         ))       }     </SubMenu>   )     render() {     return (       <Sider trigger={null} collapsible collapsed={this.props.collapsed} width="256">         <div className="menu-logo">           <Link to="/JFCC" className="a-logo">             <img src={this.state.Logo} alt="Logo" className="Logo"></img>           </Link>         </div>         <Menu theme="dark" mode="inline"         >           {Route.menus.map((val: IFMenu) => {             return val.child               ? this.renderSubMenu(val)               : this.renderMenuItem(val)           })}         </Menu>       </Sider>     );   } }   export default withRouter(SiderCustom);