React如何基于图标ID数组动态生成组件映射避免重复编码？

方案1：图标统一导出场景（最推荐） #

如果你的所有图标组件都在同一个入口文件统一导出（比如src/components/icons/index.ts），直接批量导入所有图标即可，无需手动维护映射表：

// 批量导入所有图标组件
import * as AllIconComponents from 'path/to/your/icons/entry'
// 导入你预先定义的ID数组
import { IconsIds } from 'path/to/your/iconsIds/definition'

// 组件外提前生成映射表，避免每次渲染重复计算
const iconsMap: IconsMapT = IconsIds.reduce((result, iconId) => {
  result[iconId] = AllIconComponents[iconId]
  return result
}, {})

const Icon: FC<IconPropsI> = ({ iconId, ...rest }) => {
  const TargetIcon = iconsMap[iconId]
  // 加兜底避免传入非法ID时报错
  if (!TargetIcon) return null
  return createElement(TargetIcon, rest)
}

如果不需要过滤ID，直接用AllIconComponents当映射表即可，连reduce逻辑都可以省略：

import * as AllIconComponents from 'path/to/your/icons/entry'

const Icon: FC<IconPropsI> = ({ iconId, ...rest }) => {
  const TargetIcon = AllIconComponents[iconId]
  return TargetIcon ? createElement(TargetIcon, rest) : null
}

方案2：图标分散存储场景 #

如果你的图标组件分散在不同文件没有统一导出，你可以用构建工具的批量导入语法自动收集：
以vite为例：

// 批量导入icons目录下所有图标组件文件
const iconModules = import.meta.glob('path/to/icons/**/*.tsx', { eager: true })
const iconsMap: IconsMapT = {}

Object.values(iconModules).forEach(module => {
  // 假设每个图标文件默认导出的组件名和ID一致
  const IconComponent = module.default
  iconsMap[IconComponent.name] = IconComponent
})

注意事项 #

• 映射表放在组件外部生成，全局只执行一次，不会有额外性能损耗
• 类型层面保证iconId的类型和IconsIdsT保持一致，可以获得TS类型提示，避免传入非法ID
• 如果是从第三方图标库导入（比如Ant Design Icons），直接用import * as IconLib from 'xxx-icons'的方式导入整个库，直接用导入对象当映射表即可

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