如何实现卡片网格中仅单个卡片点击时展开？

问题出在你用了全局的布尔状态控制所有卡片的展开/收起，所以点击任意卡片都会触发所有卡片的状态变化。要实现仅展开被点击的卡片，需要跟踪具体是哪张卡片被点击，步骤如下：

1. 修改状态存储逻辑
   把原来的isOpen布尔状态，改成存储被点击卡片的唯一标识（比如游戏的id），初始值设为null：

   const [expandedCardId, setExpandedCardId] = useState(null);
   

2. 更新点击事件处理
   给点击事件传入当前卡片的id，判断当前展开的是否是这张卡片，是就收起，否则展开：

   const handleCardClick = (gameId) => {
     setExpandedCardId(prevId => prevId === gameId ? null : gameId);
   };
   

3. 调整卡片渲染判断
   渲染卡片时，只有当前卡片的id和expandedCardId匹配时，才显示展开的内容：

   {games.map(game => (
     <div 
       className="card" 
       onClick={() => handleCardClick(game.id)} 
       key={game.id}
     >
       {/* 卡片原有内容 */}
       {expandedCardId === game.id && (
         <div className="card-expanded-content">
           {/* 展开的更多信息 */}
         </div>
       )}
     </div>
   ))}
   

这样修改后，每次点击只会切换对应卡片的展开状态，其他卡片不受影响。

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