如何让单个state响应多个元素hover事件，仅展示当前hover元素的对应内容

这里提供两种无需多状态的实现方案，你可以根据业务场景选择：

方案1：纯CSS实现（优先推荐，零状态、零JS代码） #

如果你的Hover Content是对应列表元素的直接子元素，不需要额外JS交互逻辑，直接用CSS选择器即可实现：

/* 列表容器子元素公共样式 */
.container-item {
  position: relative;
}
/* 所有Hover Content默认隐藏 */
.container-item .hover-content {
  display: none;
  position: absolute;
  /* 你自己需要的定位、样式属性 */
}
/* 仅当前被hover的子元素，才显示自己内部的Hover Content */
.container-item:hover .hover-content {
  display: block;
}

这个方案完全不需要维护任何状态，也不会出现多元素同时显示的问题。

方案2：单状态JS实现（适合需要额外交互逻辑的场景） #

如果你的业务需要在hover时触发其他JS逻辑，只需要用单个状态存储当前hover元素的唯一标识（索引、业务ID均可），不需要为每个元素单独声明状态：

import { useState } from 'react';

const ListContainer = ({ listData }) => {
  // 单个状态存储当前hover的元素索引，默认null为不显示任何Hover Content
  const [activeHoverIndex, setActiveHoverIndex] = useState(null);

  return (
    <div className="container">
      {listData.map((item, index) => (
        <div
          key={index}
          className="container-item"
          onMouseEnter={() => setActiveHoverIndex(index)}
          onMouseLeave={() => setActiveHoverIndex(null)}
        >
          {item.normalContent}
          {/* 只有当前hover的索引匹配时才渲染对应内容 */}
          {activeHoverIndex === index && (
            <div className="hover-content">{item.hoverContent}</div>
          )}
        </div>
      ))}
    </div>
  );
};

你之前出现所有元素Hover Content同时显示的问题，本质是所有元素共用了同一个布尔类型的状态判断，只要把布尔状态改成存储唯一标识，就可以解决这个问题。

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