React中如何将图标组件设为对象属性？代码优化报错求解

方案一：数据文件直接存储图标组件（推荐） #

创建单独的数据文件（比如categoryData.js），先导入所需的图标组件，再导出包含图标的配置数组：

// categoryData.js
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
import ExploreIcon from '@mui/icons-material/Explore';
import StarBorderPurple500Icon from '@mui/icons-material/StarBorderPurple500';

export const categoryList = [
  {
    name: 'Favourites',
    Icon: FavoriteBorderIcon, // 存储组件本身而非实例
  },
  {
    name: 'Explore',
    Icon: ExploreIcon,
  },
  {
    name: 'Watchlist',
    Icon: StarBorderPurple500Icon,
  },
];

在业务组件中导入并渲染：

import { categoryList } from './categoryData';

// ...

<List>
  {categoryList.map((category) => (
    <ListItem button key={category.name}>
      <ListItemIcon>
        {/* 动态渲染组件并传入样式类 */}
        <category.Icon className={classes.icon} />
      </ListItemIcon>
      <ListItemText primary={category.name} />
    </ListItem>
  ))}
</List>

方案二：通过字符串映射图标组件 #

如果已经用字符串存储图标名称，可创建一个映射对象关联字符串与组件：

// categoryData.js
export const categoryList = [
  {
    name: 'Favourites',
    iconName: 'FavoriteBorder',
  },
  {
    name: 'Explore',
    iconName: 'Explore',
  },
  {
    name: 'Watchlist',
    iconName: 'StarBorderPurple500',
  },
];

在业务组件中导入图标并完成映射：

import { categoryList } from './categoryData';
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
import ExploreIcon from '@mui/icons-material/Explore';
import StarBorderPurple500Icon from '@mui/icons-material/StarBorderPurple500';

// 建立字符串到组件的映射
const iconMap = {
  FavoriteBorder: FavoriteBorderIcon,
  Explore: ExploreIcon,
  StarBorderPurple500: StarBorderPurple500Icon,
};

// ...

<List>
  {categoryList.map((category) => {
    const IconComponent = iconMap[category.iconName];
    return (
      <ListItem button key={category.name}>
        <ListItemIcon>
          <IconComponent className={classes.icon} />
        </ListItemIcon>
        <ListItemText primary={category.name} />
      </ListItem>
    );
  })}
</List>

内容的提问来源于stack exchange，提问作者rumon