React手风琴组件需求：点击标题展开其余所有面板

你的现有代码用单个布尔状态showInfo控制所有面板的显示/隐藏，没法实现“点击某个标题，只隐藏当前面板、展开其他所有”的需求。要达成目标，需要调整状态管理逻辑，具体修改如下：

核心思路 #

• 用状态记录需要隐藏的面板索引，而非单个布尔值
• 点击标题时，将状态设为当前面板的索引，渲染时只隐藏该索引对应的面板，其余全部展开

修改后的完整代码 #

import { useState } from "react"
import "./sidebar.css"
import sublinks from '../../data'

const Sidebar = () => {
  // 初始值为null，表示所有面板都展开；点击后存储要隐藏的面板索引
  const [hiddenPanelIndex, setHiddenPanelIndex] = useState(null)

  return (
    <div className="sidebar show">
      <div className="sidebar__container">
        <button className="close-btn">x</button>
        <div className="sidebar__container__w">
          {sublinks.map((item, index) => {
            const { links, page } = item
            return (
              <div className="sidebar__menu__wrapper" key={index}>
                <button
                  className="sidebar__menu"
                  // 点击时切换隐藏面板：如果当前已隐藏则恢复全部展开，否则隐藏当前面板
                  onClick={() => setHiddenPanelIndex(hiddenPanelIndex === index ? null : index)}
                >
                  {page}
                </button>

                {/* 只有当前面板不是要隐藏的那个，才显示链接区域 */}
                {hiddenPanelIndex !== index && (
                  <div className="side__Links">
                    {links.map((link, linkIndex) => {
                      const { label, url } = link
                      return (
                        <a key={linkIndex} href={url} className="side__Link">
                          {label}
                        </a>
                      )
                    })}
                  </div>
                )}
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
}

export default Sidebar

关键修改说明 #

1. 状态替换：把showInfo换成hiddenPanelIndex，专门记录需要隐藏的面板位置
2. 点击逻辑优化：支持“点击已隐藏的标题，恢复所有面板展开”的交互
3. 显示条件调整：从统一控制所有面板的显示/隐藏，改成针对单个面板判断是否显示

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