使用react antd封装一个有增减功能的collapse

可以使用 React Hooks 和 antd 的 Collapse 组件来实现一个带有增减功能的折叠面板。

以下是一个简单的示例代码：

import React, { useState } from 'react';
import { Collapse, Button } from 'antd';

const { Panel } = Collapse;

function MyCollapse(props) {
  const [panelKeys, setPanelKeys] = useState([]);

  const onAddPanel = () => {
    const newKey = `panel-${panelKeys.length + 1}`;
    setPanelKeys([...panelKeys, newKey]);
  };

  const onRemovePanel = (key) => {
    const newPanelKeys = panelKeys.filter((item) => item !== key);
    setPanelKeys(newPanelKeys);
  };

  return (
    <div>
      <Button type="primary" onClick={onAddPanel}>
        新增面板
      </Button>
      <Collapse activeKey={panelKeys}>
        {panelKeys.map((key) => (
          <Panel header={`面板 ${key}`} key={key}>
            {props.children}
            <Button type="danger" onClick={() => onRemovePanel(key)}>
              删除面板
            </Button>
          </Panel>
        ))}
      </Collapse>
    </div>
  );
}

export default MyCollapse;

在 MyCollapse 组件中，通过 useState Hook 来存储当前展开的面板的 key 值数组 panelKeys。在 onAddPanel 函数中，每次新增面板时，生成一个新的 key 值并添加到 panelKeys 数组中。在 onRemovePanel 函数中，根据传入的 key 值过滤掉需要删除的面板的 key 值，并更新 panelKeys 数组。

在组件中，通过 antd 的 Button 组件来实现新增和删除面板的操作。在 Collapse 组件中，通过 activeKey 属性来设置当前展开的面板的 key 值数组。在循环渲染每个面板时，将需要展开和删除的操作按钮放在 Panel 组件的内部，并根据当前循环到的面板的 key 值来设置 Panel 组件的 header 属性。