React中如何将字符串转换为组件？图标数组动态渲染报错问题咨询

开发者阿泽

2026-4-29

如何将字符串形式的组件名转换为React组件渲染？

你遇到的这个问题是React JSX语法里的常见小坑——直接用字符串插值的方式<{icon.iconName}>渲染组件行不通，因为React对组件识别有明确规则：只有大写开头的变量才会被当作React组件处理，小写开头的会被解析成原生HTML标签，而且JSX不支持直接在尖括号里用动态字符串作为组件名。

正确实现步骤

我们需要先把字符串形式的组件名和实际导入的React组件做映射，再通过变量引用组件：

导入所需图标组件
假设你用的是Material UI图标库（其他图标库逻辑一致），先导入目标组件：

import { MdHome, MdAccountCircle, MdReorder } from '@mui/icons-material';

创建组件映射对象
把字符串名称和对应组件关联，方便通过字符串key快速查找组件：

const iconComponentMap = {
  MdHome,
  MdAccountCircle,
  MdReorder
};

在map中正确渲染组件
从映射对象中取出组件，赋值给大写开头的变量（React强制要求），再像普通组件一样渲染：

iconArray.map((icon, index) => {
  // 取出对应组件，变量名需大写开头
  const IconComponent = iconComponentMap[icon.iconName];
  // 容错：组件不存在时返回null避免报错
  if (!IconComponent) return null;
  
  return (
    <a href={icon.link} key={index}>
      <IconComponent size={icon.iconSize} />
      {/* 可选：渲染通知数字 */}
      {icon.notiNumber > 0 && <span className="badge">{icon.notiNumber}</span>}
    </a>
  );
});