React动态Icon渲染异常：导入别名图标无法正常显示

核心问题 #

你传入icon属性的是React图标组件本身（比如Cctv这个函数/类），而不是组件实例化后的JSX元素。React Icons导出的是组件，必须以<组件名 />的形式才能渲染出图标。

直接修复方案 #

把icon={Eachextra}改成icon={<Eachextra />}，同时注意label属性直接传组件会显示[object Object]，建议改用组件的name属性或自定义文本：

const defaultExtras = [Cctv, BiCctv ]

{defaultExtras.map((Eachextra) => (
        <div key={Eachextra.name} className="createBusBodyEachStopContainer">
          <Chip
            color="info"
            onDelete={() => handleRemoveExtras(Eachextra)}
            label={Eachextra.name}
            deleteIcon={<IoClose />}
            icon={<Eachextra />} {/* 关键修改：实例化组件为JSX元素 */}
          />
        </div>
      ))}

更优雅的写法（推荐） #

如果需要自定义标签文本，建议把数组改成包含组件和对应标签的对象，避免依赖组件的name属性：

// 重构数组结构，明确组件和标签对应关系
const defaultExtras = [
  { Icon: Cctv, label: "监控" },
  { Icon: BiCctv, label: "基础监控" }
]

{defaultExtras.map(({ Icon, label }) => (
        <div key={label} className="createBusBodyEachStopContainer">
          <Chip
            color="info"
            onDelete={() => handleRemoveExtras(Icon)}
            label={label}
            deleteIcon={<IoClose />}
            icon={<Icon />}
          />
        </div>
      ))}

为什么直接传组件不行？ #

React组件本质是函数或类，当你写<Cctv />时，相当于调用React.createElement(Cctv)生成了一个可渲染的JSX元素对象。而直接把Cctv（组件本身）传给icon属性，Chip组件只会拿到一个函数/类，无法将其渲染为DOM元素。

内容的提问来源于stack exchange，提问作者talatam sri manikanta