React TypeScript中点击外部关下拉菜单及多下拉互斥关闭方案

你的问题核心是每个Dropdown组件独立维护自身的展开状态，组件间没有状态同步机制，所以打开一个时其他Dropdown不会自动关闭。下面提供两种可行的解决方法：

方案1：基于React Context的全局状态管理（推荐） #

通过Context统一管理当前激活的Dropdown ID，让所有Dropdown组件共享这个状态，实现互斥展开。

实现步骤： #

1. 创建Dropdown上下文，提供全局状态和修改方法

import { createContext, useContext, useState, ReactNode } from 'react';

interface DropdownContextType {
  activeDropdownId: string | null;
  setActiveDropdownId: (id: string | null) => void;
}

const DropdownContext = createContext<DropdownContextType | undefined>(undefined);

// 上下文提供者组件
export const DropdownProvider = ({ children }: { children: ReactNode }) => {
  const [activeDropdownId, setActiveDropdownId] = useState<string | null>(null);
  return (
    <DropdownContext.Provider value={{ activeDropdownId, setActiveDropdownId }}>
      {children}
    </DropdownContext.Provider>
  );
};

// 自定义Hook，用于获取上下文
export const useDropdownContext = () => {
  const context = useContext(DropdownContext);
  if (!context) {
    throw new Error('useDropdownContext必须在DropdownProvider内部使用');
  }
  return context;
};

2. 修改Dropdown组件，使用全局状态替代局部状态

import { useDropdownContext } from './DropdownContext';

interface DropdownProps {
  id: string;
  trigger: React.ReactNode;
  content: React.ReactNode;
}

export const Dropdown = ({ id, trigger, content }: DropdownProps) => {
  const { activeDropdownId, setActiveDropdownId } = useDropdownContext();
  const dropdownRef = useRef<HTMLDivElement>(null);
  // 展开状态由全局activeDropdownId是否等于当前组件id决定
  const isOpen = activeDropdownId === id;

  const handleTriggerClick = () => {
    // 点击时切换当前Dropdown的激活状态
    setActiveDropdownId(activeDropdownId === id ? null : id);
  };

  // 点击外部关闭所有Dropdown
  const handleClickOutside = (e: MouseEvent) => {
    if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
      setActiveDropdownId(null);
    }
  };

  useEffect(() => {
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  return (
    <div ref={dropdownRef} className="dropdown">
      <div onClick={handleTriggerClick} className="trigger">
        {trigger}
      </div>
      {isOpen && <div className="content">{content}</div>}
    </div>
  );
};

3. 在根组件中用DropdownProvider包裹所有Dropdown实例

import { DropdownProvider } from './DropdownContext';
import { Dropdown } from './Dropdown';

function App() {
  return (
    <DropdownProvider>
      <Dropdown id="dropdown-1" trigger={<button>下拉菜单1</button>} content={<div>菜单内容1</div>} />
      <Dropdown id="dropdown-2" trigger={<button>下拉菜单2</button>} content={<div>菜单内容2</div>} />
      <Dropdown id="dropdown-3" trigger={<button>下拉菜单3</button>} content={<div>菜单内容3</div>} />
    </DropdownProvider>
  );
}

方案2：基于全局事件的跨组件通信 #

如果不想使用Context，可以通过自定义全局事件实现Dropdown间的状态同步，适合简单场景。

实现步骤： #

修改Dropdown组件，添加全局事件监听和触发逻辑

import { useState, useRef, useEffect } from 'react';

interface DropdownProps {
  id: string;
  trigger: React.ReactNode;
  content: React.ReactNode;
}

export const Dropdown = ({ id, trigger, content }: DropdownProps) => {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  const handleTriggerClick = () => {
    // 触发全局事件，通知其他Dropdown关闭
    window.dispatchEvent(new CustomEvent('closeAllDropdowns', { detail: { excludeId: id } }));
    setIsOpen(!isOpen);
  };

  useEffect(() => {
    // 监听全局关闭事件，排除当前Dropdown
    const handleCloseAll = (e: CustomEvent) => {
      if (e.detail.excludeId !== id) {
        setIsOpen(false);
      }
    };
    window.addEventListener('closeAllDropdowns', handleCloseAll as EventListener);
    return () => window.removeEventListener('closeAllDropdowns', handleCloseAll as EventListener);
  }, [id]);

  // 点击外部关闭当前Dropdown
  const handleClickOutside = (e: MouseEvent) => {
    if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
      setIsOpen(false);
    }
  };

  useEffect(() => {
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  return (
    <div ref={dropdownRef} className="dropdown">
      <div onClick={handleTriggerClick} className="trigger">
        {trigger}
      </div>
      {isOpen && <div className="content">{content}</div>}
    </div>
  );
};

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