{serviceItem?.subSelects?.map((item, index) => ( {item?.name} -Go服务器开发

要实现双层循环下的每个项点击高亮时不影响其他项，您可以为每个父项维护一个单独的状态。这通常通过将状态定义为一个对象来实现，其中键是父项的 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) => (
              <div
                key={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] 来判断当前显示的子项目是否被激活，这样可以确保只针对特定父级元素内进行高亮处理。
无干扰高亮:
- 每次点击后，只会影响到与之相关联的父项目及其子项目，不会影响其他同类项目。