React组件如何支持多类型图标传参并修复CustomIcon渲染报错

问题原因 #

你遇到的报错是因为原有CustomIcon的渲染逻辑不符合React规范，存在两处核心缺陷：

• 传入第三方组件库的图标函数组件时，直接调用icon()而非使用JSX语法渲染，导致返回的虚拟DOM结构无法被React正常识别，触发「对象不能作为React子元素」的错误
• 手动判断icon.props识别React元素的逻辑不准，容易把非可渲染对象直接返回

修复方案 #

替换原有逻辑为以下代码即可兼容你提到的所有传入场景：

import React from 'react';
import Icon from '@material-ui/core/Icon';

const CustomIcon = ({ icon }) => {
  // 空值兜底
  if (!icon) return <span>Iconless</span>;

  // 已经是React元素（对应 icon={<Done />} 场景）
  if (React.isValidElement(icon)) {
    return icon;
  }

  // 是React组件（对应 icon={Done} / icon={DoneIcon} 场景）
  if (typeof icon === 'function') {
    const IconComponent = icon;
    return <IconComponent />;
  }

  // 字符串类型
  if (typeof icon === 'string') {
    // SVG字符串场景，正常渲染为SVG节点
    if (icon.includes('svg')) {
      return <span dangerouslySetInnerHTML={{ __html: icon }} />;
    }
    // Material UI文字图标场景
    return <Icon>{icon}</Icon>;
  }

  // 其他情况兜底
  return <span>Iconless</span>;
};

export default CustomIcon;

优化说明 #

1. 采用React官方提供的React.isValidElement API识别已生成的React元素，判断准确率远高于手动校验属性
2. 函数类型的图标统一按组件规范用JSX语法渲染，完美兼容Material UI等各类第三方图标库的函数组件
3. 新增SVG字符串的渲染处理，避免SVG代码直接作为纯文本显示
4. 前置空值判断，减少异常场景的报错概率

如果需要给所有图标统一透传样式、尺寸等属性，还可以对应修改渲染逻辑：

• 已生成的React元素用React.cloneElement透传props：return React.cloneElement(icon, { className: 'custom-icon', fontSize: 'small' })
• 组件类型的图标直接在JSX中传参：return <IconComponent className="custom-icon" fontSize="small" />

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