React列表中多个Material-UI Tooltip点击独立开闭实现问题

你现在遇到所有Tooltip同时弹出的核心原因是：所有商品Tooltip共用了同一个布尔类型的状态变量控制显示，只要状态变更，所有绑定了这个状态的Tooltip都会同步触发显隐。 #

具体实现步骤 #

• 替换原有全局布尔状态，改用存储当前激活Tooltip对应商品唯一标识的状态，初始值设为null

// 原有错误写法（所有Tooltip共用同一个状态）
const [isShowTooltip, setIsShowTooltip] = useState(false)

// 优化后写法
const [activeProductId, setActiveProductId] = useState(null)

• 渲染商品列表时，给每个商品的点击事件传入当前商品的唯一ID，同时给Tooltip增加显隐判断条件：只有当前商品ID和激活ID一致时才展示

{productList.map(item => (
  <div 
    key={item.id} 
    className="product-item"
    onClick={() => setActiveProductId(prev => prev === item.id ? null : item.id)}
  >
    {/* 商品基础信息渲染 */}
    <p>{item.name}</p>
    <img src={item.cover} alt={item.name} />
    {/* 仅当前商品匹配激活ID时显示Tooltip */}
    {activeProductId === item.id && <Tooltip content={item.detail} />}
  </div>
))}

• 如果需要实现点击页面空白区域关闭Tooltip，可给外层容器绑定点击事件，判断点击源不属于商品项时，将activeProductId重置为null即可。

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