React中如何为map遍历生成的元素添加永久生效的className

实现思路 #

你需要额外维护一个「已完成ID集合」的状态，只做新增操作不做删除，就可以保证类名一旦加上就不会被移除，页面刷新后状态自动重置符合要求。

具体代码实现 #

首先声明存储已完成ID的状态：

// 用Set存储已经触发过completed的id，查询效率更高
const [completedIds, setCompletedIds] = useState(new Set())

监听questid的变化，每次更新时将对应id加入集合：

useEffect(() => {
  if (questid) {
    setCompletedIds(prev => {
      const newSet = new Set(prev)
      newSet.add(questid)
      return newSet
    })
  }
}, [questid])

最后修改渲染逻辑，改成从已完成集合里判断是否要加类名，同时修正了原代码key绑定位置错误、参数重名的问题：

{data.map((item) => (
  <div className="questionbox" key={item.id}>
    <p className={`newquestbox ${completedIds.has(item.id) ? "completed" : ""}`}> 
      {item.id + 1}
    </p>
  </div>
))}

补充说明 #

• 状态存在组件内部时，页面刷新后会自动清空重置，刚好符合你的需求
• 用Set而不是数组存id是为了has判断的时间复杂度为O(1)，数据量大的时候性能更好

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