React中实现下拉菜单Chevron图标独立hover响应的问题

你的问题核心是用了全局的单个状态变量控制所有图标，比如一个isHovered布尔值，只要任何一个菜单触发悬停，这个状态就会改变，导致所有依赖该状态的图标同步切换样式。

下面给出两种可行的解决思路：

方案1：封装独立的下拉菜单项组件 #

让每个菜单项自己管理hover状态，组件间状态完全独立，互不干扰。

import { useState } from 'react';
// 假设你已经引入了对应的图标组件
import ChevronUpIcon from './ChevronUpIcon';
import ChevronDownIcon from './ChevronDownIcon';

const DropdownItem = ({ label }) => {
  // 每个组件单独维护hover状态
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      className="dropdown-item"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {label}
      {isHovered ? <ChevronUpIcon /> : <ChevronDownIcon />}
    </div>
  );
};

// 父组件中批量渲染菜单项
const App = () => {
  const menuItems = ['菜单1', '菜单2', '菜单3'];

  return (
    <div className="dropdown-container">
      {menuItems.map((item, index) => (
        <DropdownItem key={index} label={item} />
      ))}
    </div>
  );
};

export default App;

方案2：父组件中跟踪每个菜单项的hover状态 #

如果不想拆分组件，可以用数组或对象存储每个项的hover状态，通过索引或唯一标识精准修改对应项的状态。

import { useState } from 'react';
import ChevronUpIcon from './ChevronUpIcon';
import ChevronDownIcon from './ChevronDownIcon';

const App = () => {
  const menuItems = ['菜单1', '菜单2', '菜单3'];
  // 用数组对应每个菜单项的hover状态，初始全为false
  const [hoverStates, setHoverStates] = useState(Array(menuItems.length).fill(false));

  const handleMouseEnter = (index) => {
    setHoverStates(prev => {
      const newStates = [...prev];
      newStates[index] = true;
      return newStates;
    });
  };

  const handleMouseLeave = (index) => {
    setHoverStates(prev => {
      const newStates = [...prev];
      newStates[index] = false;
      return newStates;
    });
  };

  return (
    <div className="dropdown-container">
      {menuItems.map((item, index) => (
        <div
          key={index}
          className="dropdown-item"
          onMouseEnter={() => handleMouseEnter(index)}
          onMouseLeave={() => handleMouseLeave(index)}
        >
          {item}
          {hoverStates[index] ? <ChevronUpIcon /> : <ChevronDownIcon />}
        </div>
      ))}
    </div>
  );
};

export default App;

核心逻辑总结 #

本质就是让每个菜单项拥有独立的状态管理，避免用单一状态控制所有元素。你之前的实现应该是共用了同一个isHovered变量，才会导致所有图标同步变化，换成上述任意一种方式都能解决问题。

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