如何为每个谜题卡片添加触发事件，点击显示对应隐藏答案

思路可行性分析 #

你的思路是可行的，但确实属于偏原生DOM操作的思路，在React这类框架里不算最优解，但逻辑上能实现需求。

为什么可行？ #

通过forEach给每个卡片绑定点击事件，点击时获取对应卡片的id，再找到cardDetailContainer里同id的答案元素，控制它的显示/隐藏，这个逻辑是通顺的。只要卡片和答案的id一一对应，就能准确匹配到目标内容。

为什么说“过于简化”？ #

在React项目里，这种绕开状态管理直接操作DOM的方式存在几个问题：

• 违背React状态驱动视图的设计理念，直接操作DOM容易导致状态和视图不同步，后续维护容易出bug。
• 冗余渲染：你现在两次map渲染了所有卡片和所有答案，默认所有答案都在DOM里只是隐藏，数据量大时会增加不必要的DOM节点。
• 代码耦合度高：事件监听依赖DOM结构（比如父元素选择器），后续组件结构调整时，事件逻辑可能直接失效。

更贴合React的优化方案 #

推荐用React状态管理当前选中的谜题ID，通过状态控制答案的显示：

方案1：全局状态控制答案显示 #

import { useState } from 'react';

function PuzzleApp() {
  const [activePuzzleId, setActivePuzzleId] = useState(null);

  return (
    <>
      <div id="cardsContainer">
        <h1>所有谜题卡片</h1>
        <div id='cardsOverview'>
          {stories.map((story) => (
            <Story 
              key={story.id} 
              id={story.id} 
              title={story.title} 
              desc={story.desc} 
              grade={story.grade}
              onClick={() => setActivePuzzleId(story.id === activePuzzleId ? null : story.id)}
            />
          ))}
        </div>
      </div>
      <div id="cardDetailContainer">
        {stories.map((story) => (
          story.id === activePuzzleId && (
            <Story 
              key={story.id} 
              id={story.id} 
              solution={story.solution} 
            />
          )
        ))}                
      </div>
    </>
  );
}

通过activePuzzleId状态控制哪个答案显示，完全不需要手动操作DOM，符合React的状态驱动逻辑。

方案2：将答案整合到卡片组件内 #

更合理的结构是把答案作为卡片组件的一部分，点击卡片时切换自身内部的显示状态，不需要分开两个容器：

// Story组件内部
function Story({ id, title, desc, grade, solution }) {
  const [showSolution, setShowSolution] = useState(false);

  return (
    <div className="story-card" onClick={() => setShowSolution(!showSolution)}>
      <h3>{title}</h3>
      <p>{desc}</p>
      <span className="grade">{grade}</span>
      {showSolution && <div className="solution">{solution}</div>}
    </div>
  );
}

// 父组件只需一次map渲染
function PuzzleApp() {
  return (
    <div id="cardsContainer">
      <h1>所有谜题卡片</h1>
      <div id='cardsOverview'>
        {stories.map((story) => (
          <Story 
            key={story.id} 
            {...story}
          />
        ))}
      </div>
    </div>
  );
}

这种结构更紧凑，每个卡片独立管理自己的显示状态，逻辑清晰且不需要跨容器操作。

总结 #

你的原始思路能实现功能，但在React项目里不够优雅，推荐用状态驱动的方式替代DOM操作，既符合框架设计，也更易维护。

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