React Accordion切换标签时自动关闭 如何保持开启直到用户手动关闭？

问题根因 #

• 标签页切换时，非激活标签内的Accordion组件被卸载，切回后组件重新初始化，默认内部维护的展开/收起状态被重置，是出现该问题的核心原因。
• 你使用的npm React Accordion组件默认采用非受控模式，状态存储在组件内部，组件销毁后状态自动丢失。

解决方案 #

方案1：保留非激活标签的组件实例 #

如果使用的标签页组件支持禁止销毁非激活面板的配置，直接开启即可。以antd Tabs组件为例，添加destroyInactiveTabPane={false}属性，即可保留隐藏标签的DOM结构和组件状态，切换回对应标签时Accordion的展开状态不会被重置。

方案2：将Accordion改为受控模式，状态提升至上层存储 #

把Accordion的展开状态存储在不会随标签切换被销毁的上层节点（标签页父组件、Context、全局状态管理库）中，示例代码如下：

import { useState } from 'react';
// 替换为实际使用的标签页、Accordion组件引入路径
import Tabs from 'your-tabs-package';
import Accordion from 'react-accordion-package';

const TabPage = () => {
  // 上层存储所有标签下Accordion的展开状态，key对应标签唯一标识
  const [expandedState, setExpandedState] = useState({
    tab1: [], // 数组存储该标签下所有展开的Accordion面板id
    tab2: []
  });

  return (
    <Tabs>
      <Tabs.Panel key="tab1" title="标签1">
        <Accordion
          expanded={expandedState.tab1}
          onChange={(newVal) => setExpandedState(prev => ({
            ...prev,
            tab1: newVal
          }))}
        >
          {/* 标签1的Accordion内容 */}
        </Accordion>
      </Tabs.Panel>
      <Tabs.Panel key="tab2" title="标签2">
        <Accordion
          expanded={expandedState.tab2}
          onChange={(newVal) => setExpandedState(prev => ({
            ...prev,
            tab2: newVal
          }))}
        >
          {/* 标签2的Accordion内容 */}
        </Accordion>
      </Tabs.Panel>
    </Tabs>
  );
};

补充说明 #

• 如果你使用的Accordion是手风琴模式（同一时间仅能展开一个面板），上层存储的状态可以改为字符串/数字类型，无需使用数组。
• 如果标签页是动态生成的，将上层存储的状态key与动态标签的唯一标识对应即可。

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