如何解决材质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属性来解决它。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。