要实现双层循环下的每个项点击高亮时不影响其他项，您可以为每个父项维护一个单独的状态。这通常通过将状态定义为一个对象来实现，其中键是父项的 ID，而值是该子项的 ID。
下面是修改后的代码示例，以支持这种结构：
import React, { useState } from 'react';const YourComponent = ({ serviceItem }) => {const [activeItems, setActiveItems] = useState({});const toggleActive = (parentId, goodsId) => {setActiveItems((prev) => ({...prev,[parentId]: prev[parentId] === goodsId ? null : goodsId // 切换当前父级下的子项激活状态}));};return (<div>{serviceItem?.subSelects?.map((item, index) => (<div className="home-popup-popupItem" key={index}><div className="home-popup-popupItem-title">{item?.name}</div><div className="home-popup-popupItem-content">{item?.subNode?.map((item1, index1) => (<divkey={index1}className={`home-popup-popupItem-content-subItem ${activeItems[item.name] === item1.goodsInfo.goodsId ? 'subItemActive' : ''}`}onClick={(e) => {if (!item1?.goodsInfo?.goodsStock) return; // 检查库存toggleActive(item.name, item1.goodsInfo.goodsId); // 调用切换函数}}>{/* 显示子项信息 */}{item1.goodsInfo.name} {/* 假设有 name 属性 */}</div>))}</div></div>))}</div>);};export default YourComponent;
关键点说明：
状态管理:
activeItems是一个对象，用于存储每个父级项（通过其名称）对应的活跃子项的 ID。
切换逻辑:
toggleActive函数接受父级 ID 和当前子项 ID。如果该子项已激活，则设置为null；否则，更新为当前选中的子项 ID。
条件渲染:
- 在渲染过程中，通过
activeItems[item.name]来判断当前显示的子项目是否被激活，这样可以确保只针对特定父级元素内进行高亮处理。
- 在渲染过程中，通过
无干扰高亮:
- 每次点击后，只会影响到与之相关联的父项目及其子项目，不会影响其他同类项目。
这样，您就可以实现点击不同主选项下子的高亮效果，而不互相干扰。如果您有任何问题或需要进一步调整，请告诉我！
内容由零声教学AI助手提供，问题来源于学员提问
