如何使用React实现点击NavDropdown.Item切换Accordion内容

核心逻辑为通过共享状态绑定下拉菜单选中项和手风琴激活项，全程不需要弹窗类组件参与，仅靠状态驱动视图更新即可实现效果。

实现步骤 #

原生React手写实现 #

• 第一步：在父组件定义共享状态，存储当前选中的菜单项唯一标识，默认值可设为第一个激活项的标识

import { useState } from 'react';

// 下拉菜单和手风琴共用的数据源，保持id一一对应即可
const menuList = [
  { id: 'item1', label: '菜单选项1', accordionContent: '手风琴模块1的展示内容' },
  { id: 'item2', label: '菜单选项2', accordionContent: '手风琴模块2的展示内容' },
  { id: 'item3', label: '菜单选项3', accordionContent: '手风琴模块3的展示内容' },
];

function Page() {
  // 共享状态：存储当前激活的项id
  const [activeId, setActiveId] = useState('item1');

• 第二步：给下拉菜单项绑定点击事件，点击时将状态更新为当前项的id

return (
    <div className="page-wrapper">
      {/* 导航下拉菜单区域 */}
      <div className="nav-dropdown">
        <button className="dropdown-trigger">展开导航</button>
        <div className="dropdown-list">
          {menuList.map(item => (
            <div 
              key={item.id}
              className={`dropdown-item ${activeId === item.id ? 'active-item' : ''}`}
              onClick={() => setActiveId(item.id)}
            >
              {item.label}
            </div>
          ))}
        </div>
      </div>

      {/* 手风琴展示区域 */}
      <div className="accordion-wrapper">
        {menuList.map(item => (
          <div key={item.id} className="accordion-item">
            <h3 className="accordion-title">{item.label}</h3>
            {/* 只有id匹配时才展示当前项的内容 */}
            {activeId === item.id && (
              <div className="accordion-content">
                {item.accordionContent}
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  )
}
export default Page;

基于UI组件库实现 #

如果你使用Ant Design、MUI等带手风琴组件的UI库，可直接将共享状态传给手风琴的受控激活属性即可，不需要手动控制内容显隐，以下是Ant Design示例：

import { useState } from 'react';
import { Dropdown, Menu, Collapse } from 'antd';

const menuList = [
  { key: '1', label: '菜单选项1', children: '手风琴模块1的展示内容' },
  { key: '2', label: '菜单选项2', children: '手风琴模块2的展示内容' },
  { key: '3', label: '菜单选项3', children: '手风琴模块3的展示内容' },
];

function Page() {
  const [activeKey, setActiveKey] = useState('1');

  // 下拉菜单配置
  const dropdownMenu = (
    <Menu
      items={menuList.map(item => ({
        key: item.key,
        label: item.label,
        onClick: () => setActiveKey(item.key)
      }))}
    />
  );

  return (
    <div>
      <Dropdown overlay={dropdownMenu}>
        <a onClick={e => e.preventDefault()}>展开导航</a>
      </Dropdown>
      {/* 手风琴直接绑定共享状态即可同步切换 */}
      <Collapse activeKey={activeKey} onChange={setActiveKey} items={menuList} />
    </div>
  )
}

注意事项 #

• 如果下拉菜单和手风琴不在同一个父组件层级，可以通过状态提升、Context或者轻量状态管理库（Zustand、Jotai等）共享这个激活状态即可
• 不需要引入react-modal这类弹窗组件，整个逻辑仅依赖状态驱动视图更新即可实现无弹窗的直接切换

内容的提问来源于stack exchange，提问作者shashi kant kasera