React映射函数中如何为单个元素独立控制Tooltip状态？

你当前的问题在于用单个布尔值控制所有Tooltip的显示状态，导致所有提示框会同时触发。要实现独立控制，只需要把状态改成记录当前激活Tooltip的索引即可，具体修改如下：

1. 调整状态定义 #

把原来的布尔状态改成存储索引的状态，初始值设为null（表示没有Tooltip激活）：

const [activeTooltipIndex, setActiveTooltipIndex] = useState(null);

2. 修改Tooltip的控制逻辑 #

在map遍历的时候，给每个Tooltip绑定当前元素的索引，通过判断索引是否匹配来控制isOpen，同时在鼠标事件和点击事件中更新激活的索引：

return (
  <>
    {data.map((item, index) => { // 修正map参数，解构出当前元素和索引
      return (
        <Flex key={index}> {/* 必须添加key，满足React列表渲染要求 */}
          <Tooltip
            label={t('tooltip.stackable')}
            isOpen={activeTooltipIndex === index} // 仅当前索引匹配时显示提示框
          >
            <img
              src={stackable}
              onMouseEnter={() => setActiveTooltipIndex(index)}
              onMouseLeave={() => setActiveTooltipIndex(null)}
              onClick={() => {
                // 点击切换：当前已激活则关闭，否则激活当前Tooltip
                setActiveTooltipIndex(prev => prev === index ? null : index);
              }}
              alt="stackable icon" // 添加alt属性，符合无障碍访问规范
            />
          </Tooltip>
        </Flex>
      );
    })}
  </>
);

关键说明 #

• 用activeTooltipIndex存储当前要显示的Tooltip索引，每个Tooltip仅在自身索引与状态值匹配时才打开。
• 鼠标移入时设置当前索引为激活状态，移出时重置为null关闭所有提示框。
• 点击事件做了切换逻辑：如果当前Tooltip已经激活，就关闭；否则激活当前的。
• 修正了原代码中map参数错误的问题，同时添加了key属性，这是React列表渲染的基本要求。

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