React项目中Antd Collapse结合react-sortable-hoc拖拽后面板无法展开求助

我帮你分析了这个场景下的问题，其实核心原因主要是key值不稳定和Collapse展开状态未正确同步这两点。下面一步步给你拆解解决方案：

1. 先搞清楚为什么映射后面板无法展开 #

当你用map渲染Collapse面板时，如果用数组的index作为key，拖拽排序后数组的index会变化，React会认为这是全新的组件，直接重新挂载，导致原来的展开状态全部丢失。另外，如果Collapse用的是非受控模式，拖拽后面板顺序变了，非受控的activeKey还是绑定原来的index，自然就找不到对应的面板了。

2. 解决方案：用稳定的key值+受控模式维护展开状态 #

第一步：给每个面板数据添加唯一标识 #

不要用index当key，改用每个面板的唯一ID（比如后端返回的id，或者自己生成的uuid），确保拖拽排序后key值不变。

比如定义初始面板数据：

const initialPanels = [
  { id: 'panel_1', title: '面板1', content: '这是面板1的内容' },
  { id: 'panel_2', title: '面板2', content: '这是面板2的内容' },
  { id: 'panel_3', title: '面板3', content: '这是面板3的内容' },
];

第二步：用受控模式维护Collapse的展开状态 #

主动维护activeKey状态，这样不管面板怎么排序，展开状态都会和面板的唯一ID绑定，不会错乱。

第三步：集成拖拽组件（以react-beautiful-dnd为例） #

这是最常用的拖拽库，下面是完整的示例代码：

import React, { useState } from 'react';
import { Collapse } from 'antd';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

const { Panel } = Collapse;

const App = () => {
  // 初始面板数据，每个面板有唯一id
  const initialPanels = [
    { id: 'panel_1', title: '面板1', content: '这是面板1的内容' },
    { id: 'panel_2', title: '面板2', content: '这是面板2的内容' },
    { id: 'panel_3', title: '面板3', content: '这是面板3的内容' },
  ];

  const [panels, setPanels] = useState(initialPanels);
  // 受控模式的展开状态，绑定面板的id
  const [activeKey, setActiveKey] = useState(['panel_1']);

  // 处理拖拽结束后的排序逻辑
  const handleDragEnd = (result) => {
    if (!result.destination) return;

    const newPanels = Array.from(panels);
    const [movedPanel] = newPanels.splice(result.source.index, 1);
    newPanels.splice(result.destination.index, 0, movedPanel);

    setPanels(newPanels);
    // 因为用的是面板id作为activeKey，所以不需要修改activeKey，展开状态会自动保留
  };

  return (
    <div style={{ padding: '20px' }}>
      <DragDropContext onDragEnd={handleDragEnd}>
        <Collapse
          activeKey={activeKey}
          onChange={setActiveKey}
          bordered={false}
          style={{ background: '#f5f5f5' }}
        >
          <Droppable droppableId="collapse-panels">
            {(provided) => (
              <div
                {...provided.droppableProps}
                ref={provided.innerRef}
              >
                {panels.map((panel, index) => (
                  <Draggable
                    key={panel.id}
                    draggableId={panel.id}
                    index={index}
                  >
                    {(provided) => (
                      <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        style={{
                          ...provided.draggableProps.style,
                          marginBottom: '8px',
                        }}
                      >
                        <Panel
                          key={panel.id}
                          header={panel.title}
                          style={{ background: '#fff' }}
                        >
                          {panel.content}
                        </Panel>
                      </div>
                    )}
                  </Draggable>
                ))}
                {provided.placeholder}
              </div>
            )}
          </Droppable>
        </Collapse>
      </DragDropContext>
    </div>
  );
};

export default App;

3. 关键注意点 #

• 永远不要用index作为组件key：除非你的数组永远不会排序、添加或删除元素，否则一定会导致状态丢失或渲染异常。
• 使用Collapse的受控模式：主动维护activeKey，让展开状态和面板的唯一ID绑定，而不是依赖数组顺序。
• 拖拽组件不要破坏Panel结构：把Panel包裹在拖拽容器内，不要直接修改Panel的内部DOM，保证Ant Design的事件监听能正常工作。

如果是自己实现拖拽逻辑，核心思路也是一样的：保持key稳定，同步维护展开状态即可。

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