Material UI Icons 在生产环境中失去了 displayName 属性？

Question

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

我已经尝试从

中解构图标

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

从“@material-ui/icons/Home”导入{ HomeIcon }；

随着整个图标变得未定义，这使问题变得更糟。

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',
    isExternalLink: false
  },
  CodeIcon: {
    link: '/skills',
    text: 'Skills',
    isExternalLink: false
  },
  CallIcon: {
    link: '/contact',
    text: 'Contact',
    isExternalLink: false
  },
  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;

Answer 1

我刚刚通过为侧边栏组件中的每个图标添加 displayName 属性来解决/破解它。