React封装Material UI图标调用报错：预期字符串却得到对象如何修复？

错误原因 #

你在iconTypes中存储的是已经实例化完成的React元素对象（<RotateLeftIcon />执行后返回的就是React元素对象，不是组件本身），后续在getIcon方法中尝试把这个对象当作组件再次用<Component />语法渲染，React不允许把对象当作组件类型传入，所以抛出该错误。

修复步骤 #

• 第一步：修改icon.js中iconTypes的存储逻辑，存组件引用而非实例化后的元素

import RotateLeftIcon from '@material-ui/icons/RotateLeft';

const iconTypes = {
  // 存储组件本身，不要加尖括号实例化
  LEFT_ROTATION: RotateLeftIcon,
};

export const iconNames = {
  LEFT_ROTATION: 'LEFT_ROTATION',
};

export const getIcon = (iconName, styleProps) => {
  const Component = iconTypes[iconName];
  return <Component style={{ ...styleProps }} />;
};

• 第二步：补全调用代码的依赖导入

import React from 'react'
// 按你实际的文件路径调整导入位置
import { getIcon, iconNames } from './icon';

export default function TestingIcons() {
    return getIcon(iconNames.LEFT_ROTATION, {
        color: '#fff',
        fontSize: '1rem',
      });
}

可选优化 #

可以调整getIcon逻辑支持透传全量props，使用更灵活：

export const getIcon = (iconName, props = {}) => {
  const Component = iconTypes[iconName];
  // 增加边界判断，避免传入不存在的图标名时报错
  if (!Component) return null;
  // 直接透传所有props，支持className、onClick等属性传入
  return <Component {...props} />;
};

// 调用示例
getIcon(iconNames.LEFT_ROTATION, {
  style: {
    color: '#fff',
    fontSize: '1rem',
  },
  className: 'custom-icon',
  onClick: () => console.log('icon clicked')
})

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