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

Posted 2020-11-28 gqx-html

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);