React中映射对象数组时如何为图标组件统一传递Props？

要避免在对象数组中重复定义图标属性，只需调整数据结构并在map循环中统一传递属性，具体实现如下：

1. 调整数据数组结构 #

把数组中每个对象的icon字段从已渲染的JSX元素，替换为图标组件的引用（注意组件名首字母大写，符合React组件命名规范）：

const data = [
  {
    id: 1,
    name: 'Delivery',
    Icon: DeliveryIcon, // 存储组件本身而非JSX元素
  },
  {
    id: 2,
    name: 'Prices',
    Icon: Price,
  },
];

2. 在map循环中统一传递属性 #

在渲染循环里，直接使用存储的组件，并传入fill、width、height等统一属性：

const InfoBlock: React.FC = () => {
  // 统一定义图标属性，便于后续批量修改
  const iconCommonProps = {
    fill: '#6bc553b0',
    width: 28,
    height: 28,
  };

  return (
    <div className={classes['info-block']}>
      {data.map((item) => (
        <div className={classes['info-block-item']} key={item.id}>
          {/* 动态渲染组件并传递统一属性 */}
          <item.Icon {...iconCommonProps} />
          {item.name}
        </div>
      ))}
    </div>
  );
};

3. 处理个别图标的特殊属性 #

如果有个别图标需要自定义属性，可在数据数组中添加iconProps字段存储差异化属性，渲染时通过扩展运算符合并（差异化属性会覆盖统一属性）：

const data = [
  {
    id: 1,
    name: 'Delivery',
    Icon: DeliveryIcon,
    iconProps: { fill: '#ff0000' }, // 个别图标的特殊属性
  },
  {
    id: 2,
    name: 'Prices',
    Icon: Price,
  },
];

// 渲染时合并属性
<item.Icon {...iconCommonProps} {...item.iconProps} />

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