React组件传递图片Prop后重复显示同一图片的解决方法

1. 修正serviceData的定义格式 #

确保数组里的img字段直接引用SVG组件本身，而非提前渲染成JSX元素。正确示例：

const serviceData = [
  {
    title: "宣传服务",
    img: Megaphone, // 直接传组件类/函数，不要写<Megaphone />
    desc: "..."
  },
  {
    title: "安全保障",
    img: Shield,
    desc: "..."
  }
];

2. 调整HomeService组件的渲染逻辑 #

在子组件中，要把传入的image当作React组件来渲染（注意组件名需大写开头，符合React规范）：

// HomeService.jsx
export default function HomeService({ image: ImageComponent }) {
  return (
    <div className="service-card">
      {/* 以组件形式渲染传入的SVG */}
      <ImageComponent />
      <h3>{/* 标题内容 */}</h3>
      <p>{/* 描述内容 */}</p>
    </div>
  );
}

3. 遍历渲染时添加唯一key #

在ServicesSection的map循环中，给每个HomeService绑定唯一的key，避免React复用组件导致的渲染异常：

// ServicesSection.jsx
export default function ServicesSection() {
  return (
    <section className="services">
      {serviceData.map((service) => (
        <HomeService
          key={service.title} // 用唯一的title作为key，无唯一标识时可用index兜底
          image={service.img}
          title={service.title}
          desc={service.desc}
        />
      ))}
    </section>
  );
}

额外排查点 #

• 检查SVG文件内部是否存在重复的id（比如多个SVG用了同一个#icon），这种全局ID冲突会导致所有SVG渲染第一个的内容，需给每个SVG的内部元素设置唯一ID。
• 确认HomeService中没有硬编码固定的SVG组件（比如不小心写死了<Megaphone />而非使用传入的props）。

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