如何使用React Hooks实现悬停触发单个下拉菜单显示（无需为每个下拉单独设置Hook）

嘿，我明白你遇到的困扰了——单个状态变量控制所有下拉菜单，导致一悬停就全部展开，确实挺头疼的。咱们不用给每个菜单单独写Hook，有两种优雅的解决办法，我给你详细说说：

方案1：封装独立的下拉菜单组件（最推荐） #

核心思路是把下拉菜单的状态和逻辑封装成一个独立的组件，这样每个组件实例都会拥有自己的show状态，天然实现隔离。

代码示例：

import { useState } from 'react';
import { NavDropdown } from 'react-bootstrap'; // 假设你用的是react-bootstrap

// 封装自定义下拉组件
const CustomNavDropdown = ({ title, id, children }) => {
  const [show, setShow] = useState(false);

  const showDropdown = () => {
    setShow(true);
  };

  const hideDropdown = () => {
    setShow(false);
  };

  return (
    <NavDropdown
      title={title}
      id={id}
      show={show}
      onMouseEnter={showDropdown}
      onMouseLeave={hideDropdown}
    >
      {children}
    </NavDropdown>
  );
};

// 父组件里使用
const ParentComponent = () => {
  return (
    <nav>
      <CustomNavDropdown title="Tales" id="tales-dropdown">
        <NavDropdown.Item>故事1</NavDropdown.Item>
        <NavDropdown.Item>故事2</NavDropdown.Item>
      </CustomNavDropdown>
      <CustomNavDropdown title="Articles" id="articles-dropdown">
        <NavDropdown.Item>文章1</NavDropdown.Item>
        <NavDropdown.Item>文章2</NavDropdown.Item>
      </CustomNavDropdown>
    </nav>
  );
};

这样每个CustomNavDropdown都有自己的状态，悬停其中一个时，其他菜单完全不受影响，代码也更模块化，后期维护起来也方便。

方案2：用单个状态对象管理多个菜单的显示状态 #

如果不想封装组件，咱们可以用一个对象来存储每个菜单的显示状态，每个菜单对应一个唯一的ID，通过ID来控制对应的状态。

代码示例：

import { useState } from 'react';
import { NavDropdown } from 'react-bootstrap';

const ParentComponent = () => {
  // 用对象存储每个菜单的显示状态，key是菜单id，value是布尔值
  const [showDropdowns, setShowDropdowns] = useState({});

  const showDropdown = (id) => {
    // 更新对应id的菜单状态，展开它
    setShowDropdowns(prevState => ({
      ...prevState,
      [id]: true
    }));
  };

  const hideDropdown = (id) => {
    // 更新对应id的菜单状态，收起它
    setShowDropdowns(prevState => ({
      ...prevState,
      [id]: false
    }));
  };

  return (
    <nav>
      <NavDropdown
        title="Tales"
        id="tales-dropdown"
        show={showDropdowns['tales-dropdown'] || false}
        onMouseEnter={() => showDropdown('tales-dropdown')}
        onMouseLeave={() => hideDropdown('tales-dropdown')}
      >
        <NavDropdown.Item>故事1</NavDropdown.Item>
        <NavDropdown.Item>故事2</NavDropdown.Item>
      </NavDropdown>
      <NavDropdown
        title="Articles"
        id="articles-dropdown"
        show={showDropdowns['articles-dropdown'] || false}
        onMouseEnter={() => showDropdown('articles-dropdown')}
        onMouseLeave={() => hideDropdown('articles-dropdown')}
      >
        <NavDropdown.Item>文章1</NavDropdown.Item>
        <NavDropdown.Item>文章2</NavDropdown.Item>
      </NavDropdown>
    </nav>
  );
};

这个方案只用了一个useState，通过ID来区分不同的菜单，也能实现单个菜单独立展开收起的效果。

为什么你的原代码会出问题？ #

你原来用了单个show布尔值，所有菜单的show属性都绑定这个值——当你悬停任意一个菜单时，show变成true，所有菜单都会跟着展开，这就是状态共享导致的问题。上面两种方案都是通过状态隔离（要么每个组件自己存状态，要么用对象按ID区分状态）来解决这个问题的。

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