React中如何向作为props传入子组件的图标组件传递额外props

可行方案，分两种场景实现： #

方案1：无需修改现有调用方式（推荐适配旧代码） #

你当前传入的icon是已经实例化的React元素，直接调用是没法传参的，可以用React内置的cloneElement方法给已有元素追加额外props：

import { cloneElement, isValidElement } from 'react';

function Item(props) {
  // 先校验传入的icon是合法React元素，避免报错
  if (!isValidElement(props.icon)) return null;
  
  // 第二个参数为要追加的所有额外props
  const iconWithProps = cloneElement(props.icon, {
    className: "item-custom-icon",
    size: 18,
    // 其他你需要传递的属性
  });

  return iconWithProps;
}

原有调用方式<Item icon={<FaIcon />} />完全不需要改动。

方案2：调整调用方式传组件本身（推荐新业务使用） #

如果可以统一调用规范，建议调用时直接传图标组件本身，不需要提前实例化，使用起来更灵活，也没有克隆元素的额外性能开销：

// 调用方式改为传组件本身，不是实例
<Item icon={FaIcon} />

组件实现逻辑：

function Item(props) {
  const Icon = props.icon;
  // 直接自定义所有props，也可以合并外部传入的额外图标属性
  return <Icon className="item-custom-icon" size={18} />;
}

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