React中使用对象数组传递SVG组件时出现重复渲染问题

核心原因 #

你遇到的问题是因为全局数组中直接存储了JSX元素实例（<SomeSvg1 />这类写法会立即创建组件实例），这些实例在模块加载时就被初始化，React渲染时会复用这些已有实例，而非为每个子组件创建新的实例，导致所有<SomeComponent>渲染出相同的SVG。另外也可能是SVG文件内部存在重复的id（比如<defs>中的滤镜、裁剪路径等），浏览器会优先使用最后加载的同名id资源。

解决方案1：存储SVG组件而非实例（推荐） #

将数组中的image字段改为存储SVG组件本身，而非提前实例化的JSX元素，让子组件在渲染时动态创建实例：

1. 修改全局数组：

import { ReactComponent as SomeSvg1 } from 'assets/images/svg/Home/some_svg1.svg'
import { ReactComponent as SomeSvg2 } from 'assets/images/svg/Home/some_svg2.svg'
import { ReactComponent as SomeSvg3 } from 'assets/images/svg/Home/some_svg3.svg'

export const SVG_OBJECTS = [
  {
    target: 'sometarget1',
    image: SomeSvg1 // 仅传递组件，不实例化
  },
  {
    target: 'sometarget2',
    image: SomeSvg2
  },
  {
    target: 'sometarget3',
    image: SomeSvg3
  }
]

2. 修改<SomeComponent>，动态渲染传入的组件：

const SomeComponent = ({ image: ImageComponent, ...props }) => {
  // 组件名必须大写开头，符合React规范
  return (
    <div {...props}>
      <ImageComponent />
    </div>
  )
}

3. 容器组件的map逻辑保持不变：

const SomeContainer = () => {
  return (
    <Box>
      {SVG_OBJECTS.map((item) => (
        <SomeComponent
          {...item}
          key={item.target}
        />
      ))}
    </Box>
  )
}

解决方案2：用工厂函数包裹JSX元素 #

如果需要保留数组中直接生成JSX的逻辑，可以用函数包裹，让每次渲染时都生成新的JSX实例：

1. 修改全局数组：

export const SVG_OBJECTS = [
  {
    target: 'sometarget1',
    image: () => <SomeSvg1 /> // 用函数返回JSX
  },
  {
    target: 'sometarget2',
    image: () => <SomeSvg2 />
  },
  {
    target: 'sometarget3',
    image: () => <SomeSvg3 />
  }
]

2. 修改<SomeComponent>调用函数生成JSX：

const SomeComponent = ({ image, ...props }) => {
  return (
    <div {...props}>
      {image()} // 调用函数生成新的SVG实例
    </div>
  )
}

额外排查：SVG文件内部冲突 #

如果上述方法无效，检查所有SVG文件的内部代码：

• 确保<defs>中的clipPath、filter等元素的id是唯一的（比如给每个SVG的id加上前缀，如some-svg1-clip）
• 或者在渲染时给每个SVG实例传递唯一的id属性：

{SVG_OBJECTS.map((item) => (
  <SomeComponent
    key={item.target}
    image={<item.image id={`svg-${item.target}`} />}
    target={item.target}
  />
))}

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