在React应用程序中,我需要确保图标显示在三个类别中。例如,构建图标,主页图标和工作图标。当前,某些图标混杂在不同的类别中。 请检查下面的代码,看看我们是否可以使用JSX创建一个循环来显示图标。
{/* Icon */}
{(type !== 'button') &&
<OurtemIcon color="inherit">
<Icon icon={type} defaultIcon="TypeOne"/>
</ourItemIcon>
}
const iconComponent = { ...icin.jsx
TypeOne: ContentCopy,
TypeTwo: Computer,
TypeThree: Build,
}
//...............................
const sanitize = icon => icon && icon.replace('-', '');
const Icon = ({ icon, defaultIcon, ...other }) => {
const Component = iconComponent[sanitize(icon)] ||
iconComponent[sanitize(defaultIcon)];
return Component ? <Component {...other} /> : null;
};
export default Icon;
感谢您的输入。