React循环中如何设置hover仅作用于单个元素而非全部？

你当前的问题出在共用了一个全局的hover状态变量——所有循环生成的元素都绑定这个状态，所以只要触发任意一个元素的鼠标事件，全局状态就会改变，导致所有元素的箭头一起显示/隐藏。下面给你几种实用的解决方案：

方案1：用CSS实现（最推荐，无需JS状态） #

这种简单的hover显示/隐藏需求，纯CSS就能搞定，性能更好也更简洁：

先写CSS样式：

/* 默认隐藏箭头容器 */
.flex.gap-3 .arrow-wrap {
  display: none;
}

/* 父容器hover时显示箭头 */
.flex.gap-3:hover .arrow-wrap {
  display: block; /* 根据你的布局需求调整display值，比如inline-block */
}

然后修改JSX，去掉状态和事件绑定：

{data.map((item, index) => (
  <div key={index} className="flex gap-3">
    <div>{item.content}</div>
    <div className="arrow-wrap">{item.arrow}</div>
  </div>
))}

方案2：用状态记录当前hover的元素标识 #

如果必须用JS处理（比如有复杂交互逻辑），可以把状态改成存储当前hover元素的唯一标识（优先用item的id，没有的话用index）：

用index的示例： #

const [hoverIndex, setHoverIndex] = useState(-1) // 默认-1表示无元素hover

{data.map((item, index) => (
  <div 
    key={index} 
    onMouseEnter={() => setHoverIndex(index)} 
    onMouseLeave={() => setHoverIndex(-1)} 
    className="flex gap-3"
  >
    <div>{item.content}</div>
    {/* 只有当前元素的index等于hoverIndex时才显示箭头 */}
    <div hidden={hoverIndex !== index}>{item.arrow}</div>
  </div>
))}

用item唯一id的示例（更可靠）： #

如果你的数据项有唯一id（比如item.id），优先用这个，避免列表顺序变化导致的状态混乱：

const [hoverId, setHoverId] = useState(null)

{data.map((item) => (
  <div 
    key={item.id} 
    onMouseEnter={() => setHoverId(item.id)} 
    onMouseLeave={() => setHoverId(null)} 
    className="flex gap-3"
  >
    <div>{item.content}</div>
    <div hidden={hoverId !== item.id}>{item.arrow}</div>
  </div>
))}

方案3：拆分为独立子组件 #

把每个列表项封装成独立组件，让每个组件自己维护hover状态，这样各元素的状态完全隔离：

// 定义子组件
const ListItem = ({ item }) => {
  const [hover, setHover] = useState(false)

  return (
    <div 
      onMouseEnter={() => setHover(true)} 
      onMouseLeave={() => setHover(false)} 
      className="flex gap-3"
    >
      <div>{item.content}</div>
      <div hidden={!hover}>{item.arrow}</div>
    </div>
  )
}

// 父组件中使用
{data.map((item) => (
  <ListItem key={item.id} item={item} />
))}

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