React组件大屏图标不渲染：需注释小屏图标代码才显示

核心问题：Key冲突导致React组件复用异常 #

你遇到的大屏图标无法渲染的问题，本质是小屏与大屏区域的元素Key重复，导致React错误地复用了组件实例，进而阻止大屏图标正常渲染。

具体原因 #

在小屏图标的循环渲染中，你使用了selectedTech.name作为Key：

key={selectedTech.name}

而大屏区域的循环使用了tech.name + techIndex作为Key：

key={tech.name + techIndex}

当同一个技术名称（比如"React"）同时出现在小屏和大屏的渲染列表中时，两者的Key会重复。即使小屏区域通过lg:hidden被隐藏，React仍会认为这是同一个组件实例，优先复用小屏中已渲染的组件，导致大屏的图标无法正常挂载。

解决方案 #

1. 确保Key全局唯一性 #

修改小屏区域的Key，加入外层循环的tech.title前缀，确保每个Key在整个组件树中唯一：

// 小屏区域的循环Key修改为
key={`${tech.title}-${selectedTech.name}-${index}`}

这样即使不同TechStack下有相同名称的技术，Key也不会重复，避免React错误复用组件。

2. 优化条件渲染结构（可选） #

将小屏的条件渲染逻辑从TechStackCards.map的循环体中移出，单独放在父容器底部，减少循环内的条件渲染复杂度：

// 原循环内的小屏代码移除，替换为：
</div> {/* 关闭TechStackCards.map的父div */}
{/* 小屏区域单独渲染 */}
<div className="lg:hidden">
  {selectedTech && (
    <div className="h-full w-full grid grid-cols-12 gap-2">
      {selectedTech.techStack.map((tech, index) => (
        <div 
          className="h-44 w-full rounded-md bg-transparent hover:bg-primary-hover border flex flex-col space-y-6 justify-center items-center group/Tech transition-all ease-in-out duration-300 col-span-4"
          key={`mobile-${tech.name}-${index}`}
        >
          {/* 图标和文本内容保持不变 */}
        </div>
      ))}
    </div>
  )}
</div>

这种方式可以避免在每次TechStackCards循环中重复渲染小屏内容，进一步减少Key冲突的可能性。

3. 检查SVG组件的纯净性 #

确保你的自定义SVG组件是无状态的纯组件，如果SVG组件内部包含状态或副作用，可能会在组件复用时出现渲染异常。可以将SVG组件改写为纯函数组件：

// 示例纯SVG组件
const ReactIcon = () => (
  <svg viewBox="0 0 24 24" fill="currentColor">
    {/* SVG路径内容 */}
  </svg>
);

验证步骤 #

1. 先修改小屏区域的Key，刷新页面测试大屏图标是否正常显示；
2. 如果问题仍存在，再尝试优化条件渲染结构；
3. 最后检查SVG组件是否存在状态或副作用问题。

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