如何让React Spring实现的Accordion手风琴一次仅展开一个项

核心逻辑是把原来每个折叠项独立维护的展开状态，收回到父组件统一管理，全局只保存一个当前激活的展开项标识。

具体修改步骤 #

• 第一步：在父组件新增activeId状态，替换原来每个项独立的open状态

// 父组件App.tsx里的状态定义
const [activeId, setActiveId] = useState<number | null>(null); // 默认全部闭合
// 如果需要默认展开第一项，初始值设为0即可

• 第二步：修改折叠项的点击回调逻辑，点击时更新全局activeId

// 遍历渲染手风琴项的时候传递属性
{accordionItems.map((item, index) => (
  <AccordionItem
    key={index}
    item={item}
    isOpen={activeId === index}
    onToggle={() => {
      // 如果点击的是已经展开的项，就设为null闭合，否则设为当前项id
      setActiveId(activeId === index ? null : index);
    }}
  />
))}

如果你的手风琴项有独立唯一标识，优先用自身id代替index做判断，避免数组顺序变化导致的状态异常。

• 第三步：Accordion子组件不需要修改内部的React Spring动画逻辑，直接接收父组件传的isOpen属性作为动画触发条件即可，原来的展开/收起动画配置可以完全复用。

额外可选调整 #

如果需要禁止用户关闭已经展开的项（必须保持有一个项处于展开状态），可以把回调逻辑改成：

onToggle={() => setActiveId(index)}

这样点击已经展开的项不会触发闭合，始终保持有一个项展开。

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