React中点击新Dropdown时关闭已打开Dropdown的实现方案问询

要实现点击其他Dropdown时关闭已打开的，核心是把Dropdown的激活状态提升到父组件统一管理——子组件之间无法直接通信，父组件作为状态管理者协调所有Dropdown的显示逻辑。

修改后的完整代码： #

父组件（Parent.jsx）

import { useState } from 'react';
import Dropdown from './Dropdown';

const Parent = () => {
  // 记录当前激活的Dropdown标识，初始状态为null（全部关闭）
  const [activeDropdown, setActiveDropdown] = useState(null);

  // 处理Dropdown切换逻辑
  const handleDropdownToggle = (dropdownKey) => {
    // 点击已激活的Dropdown则关闭，否则切换为当前Dropdown
    setActiveDropdown(prev => prev === dropdownKey ? null : dropdownKey);
  };

  return (
    <>
      <div>A- click me 
        <Dropdown 
          isActive={activeDropdown === 'A'} 
          onToggle={() => handleDropdownToggle('A')} 
        />
      </div>
      <div>B - click me 
        <Dropdown 
          isActive={activeDropdown === 'B'} 
          onToggle={() => handleDropdownToggle('B')} 
        />
      </div>
      <div>C- click me 
        <Dropdown 
          isActive={activeDropdown === 'C'} 
          onToggle={() => handleDropdownToggle('C')} 
        />
      </div>
    </>
  );
};

export default Parent;

子组件（Dropdown.jsx）

const Dropdown = ({ isActive, onToggle }) => {
  // 子组件不再维护自身状态，完全依赖父组件传递的props
  return (
    <div>
      <div onClick={onToggle}> button </div>
      {isActive ? <div> Content </div> : null}
    </div>
  );
};

export default Dropdown;

逻辑说明： #

• 父组件通过activeDropdown状态跟踪当前打开的Dropdown，用'A'/'B'/'C'作为唯一标识。
• 每个Dropdown接收两个核心props：isActive（判断自身是否显示内容）、onToggle（点击按钮时通知父组件切换状态）。
• 点击按钮时，父组件的handleDropdownToggle函数更新状态：若点击的是已打开的Dropdown则关闭，否则切换为当前Dropdown，其他Dropdown的isActive会自动变为false，实现联动关闭。

这种方案遵循React的状态提升原则，让共享状态由父组件统一管理，子组件专注于UI渲染，逻辑清晰且易维护。

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