材质UI图标在生产环境中会丢失displayName属性吗？

问题描述

在Sidebar组件中，我将Material UI图标向下钻取到SideBarIcon组件。在开发人员环境中工作时，我可以访问displayName属性。创建生产版本时，这很方便消失。

我尝试过破坏图标的来源

从'@ material-ui / icons / Home'导入HomeIcon；

从'@ material-ui / icons / Home'导入{HomeIcon};

，随着整个Icon变得不确定，这使问题更加严重。

import React from 'react';
import { Link } from 'react-router-dom';
import SidebarIcon from './SidebarIcon';
import HomeIcon from '@material-ui/icons/Home';
import FaceIcon from '@material-ui/icons/Face';
import WorkIcon from '@material-ui/icons/Work';
import CodeIcon from '@material-ui/icons/Code';
import CallIcon from '@material-ui/icons/Call';
import AssignmentIndIcon from '@material-ui/icons/AssignmentInd';

const Sidebar = props => {
  return (
    <div className="sidebar-container">
      <div className="logo-container"><Link to="/">TL</Link></div>
      <nav className="nav-container ">
        <SidebarIcon Icon={HomeIcon} />
        <SidebarIcon Icon={FaceIcon} />
        <SidebarIcon Icon={CodeIcon} />
        <SidebarIcon Icon={WorkIcon} />
        <SidebarIcon Icon={CallIcon} />
      </nav>
      <nav className="sidebar-contact-container">
        <a className="resume-icon-wrapper" href="https://drive.google.com/file/d/someurl" target="_blank">
          <SidebarIcon Icon={AssignmentIndIcon} />
        </a>
      </nav>
    </div>
  );
};

export default Sidebar;

import React from 'react';
import { Link } from 'react-router-dom'
import * as ReactTransitionGroup from 'react-transition-group';

const iconProps = {
  HomeIcon: {
    link: '/',text: 'Home',isExternalLink: false,},FaceIcon: {
    link: '/about',text: 'About',isExternalLink: false
  },WorkIcon: {
    link: '/work',text: 'Work',CodeIcon: {
    link: '/skills',text: 'Skills',CallIcon: {
    link: '/contact',text: 'Contact',AssignmentIndIcon: {
    link: 'https://drive.google.com/file/d/someurl',text: 'Resume',isExternalLink: true
  }
};
  
const SidebarIcon = props => {
  const { Icon } = props;
  const [isHovered,setHover] = React.useState(false);

  const mapIconName = (iconName,type) => {
    if (type === 'link') return iconProps[iconName].link;
    return iconProps[iconName].text;
  }

  console.log('props',props)

  const text = mapIconName(Icon.displayName,'text');
  const link = mapIconName(Icon.displayName,'link');

  const view = isHovered ? (
    <span key={text}>{text}</span>
  ) : (
    <Icon key={link}/>
  );

  const internalOrExternalLink = iconProps[Icon.displayName].isExternalLink ? (
    <div className='sidebar-icon-container' onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      <ReactTransitionGroup.Csstransition
        in={isHovered}
        classNames="icon"
        timeout={700}
      >
        {view}
      </ReactTransitionGroup.Csstransition>
    </div>
    ) : (
    <Link to={link}>
      <div className='sidebar-icon-container' onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
        <ReactTransitionGroup.Csstransition
          in={isHovered}
          classNames="icon"
          timeout={700}
        >
          {view}
        </ReactTransitionGroup.Csstransition>
      </div>
    </Link>
  );

  return (
    internalOrExternalLink
  );
};

export default SidebarIcon;

解决方法

我只是通过在侧边栏组件中为每个图标添加displayName属性来解决它。