React动态创建组件添加className报错：对象不可扩展

你遇到的问题根源是：多数UI库导出的图标组件，其props对象被冻结（Object.freeze），无法直接修改或添加新属性，直接赋值icon.props.className自然会触发不可扩展的错误。以下是几种可行的解决办法：

方法1：通过扩展运算符合并props #

不要直接修改原组件的props，而是创建新的props对象，合并原有属性和自定义className：

function getIcon(iconName) {
  const IconComponent = Icons[iconName];
  const mergedProps = {
    ...IconComponent.props,
    className: `${IconComponent.props?.className || ''} your-custom-class`
  };
  return <IconComponent {...mergedProps} />;
}

方法2：渲染时直接传入className #

在IconButton组件中直接将className传递给图标组件，跳过修改已有props的步骤，这是最符合React设计模式的做法：

const IconButton = React.forwardRef(({ iconName, className, ...props }, ref) => {
  const IconComponent = Icons[iconName];
  return (
    <button ref={ref} className="icon-button-wrapper" {...props}>
      <IconComponent className={`icon-button-icon ${className || ''}`} />
    </button>
  );
});

方法3：用React.cloneElement克隆组件 #

如果已经有图标组件的实例，使用React.cloneElement创建新实例并添加className，不会触碰原组件的冻结props：

function getIcon(iconInstance) {
  return React.cloneElement(iconInstance, {
    className: `${iconInstance.props?.className || ''} your-custom-class`
  });
}

注意事项 #

• 优先选择方法2，直接传递props的方式更清晰，也避免了修改组件内部属性的风险。
• 永远不要尝试直接修改React组件的props对象，这违反了单向数据流原则，且多数库会冻结props防止意外篡改。

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