React仅第一个createElement元素渲染，其余不可见问题求助

这种情况最常见的原因是SVG文件内部的ID冲突，其次可能是CSS选择器限制或React组件复用问题，具体分析和解决方法如下：

1. SVG内部ID重复（最可能） #

当你通过ReactComponent导入SVG时，SVG里的<defs>、<clipPath>、<mask>或渐变元素等如果使用了相同的ID（比如多个SVG里都有id="clip"），浏览器会优先识别第一个SVG的ID，后续SVG引用这个ID时会失效，导致显示异常（DOM存在但不可见）。

解决方法：

• 手动修改每个SVG文件，把内部的所有ID改成唯一值，比如给logo1的ID加前缀logo1-，logo2的加logo2-，确保不同SVG的ID不重复。
• 用SVGO等工具优化SVG时，开启prefixIds插件，自动给每个SVG的内部ID添加唯一前缀，避免冲突。

2. CSS选择器限制 #

检查你的全局CSS或组件内样式，是否存在只作用于第一个SVG的选择器，比如：

.some-container svg:first-child {
  opacity: 1;
}
.some-container svg {
  opacity: 0;
}

这类规则会让除第一个外的所有SVG被隐藏。

解决方法：

• 删除或修改这类针对first-child/first-of-type的SVG样式，改为通过自定义类名控制SVG的可见性和样式。

3. React组件复用问题 #

如果是在循环中渲染这些logo，若循环的父元素没有设置唯一的key属性，React会复用组件实例，导致后续SVG没有正确初始化。

解决方法：
确保循环渲染时，每个包含logo的父元素都有唯一key，比如：

{categories.map(category => (
  <div key={category.code}>
    {logo(`logo_${category.code}`, { className: "mx-auto mb-3 w-6 h-6" })}
  </div>
))}

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