使用React和Antd封一个有增减功能的折叠面板

好的，我可以帮你封装一个有增减功能的折叠面板。首先需要安装React和Antd，在命令行中输入以下命令：

npm install react antd

然后你可以使用以下代码来实现一个简单的折叠面板：

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

const { Panel } = Collapse;

const MyCollapse = () => {
  const [panels, setPanels] = useState(['1']);

  const addPanel = () => {
    const newKey = (parseInt(panels[panels.length - 1]) + 1).toString();
    setPanels([...panels, newKey]);
  };

  const removePanel = (key) => {
    const newPanels = panels.filter((panelKey) => panelKey !== key);
    setPanels(newPanels);
  };

  return (
    <>
      <Button onClick={addPanel}>Add Panel</Button>
      <Collapse accordion>
        {panels.map((key) => (
          <Panel header={`Panel ${key}`} key={key}>
            <p>Content of panel {key}</p>
            <Button onClick={() => removePanel(key)}>Remove Panel</Button>
          </Panel>
        ))}
      </Collapse>
    </>
  );
};

export default MyCollapse;

在这个例子中，我们使用了React的`useState` hook来管理折叠面板的状态。我们将`panels`数组作为状态，其中存储了所有折叠面板的key。然后我们定义了两个方法，`addPanel`和`removePanel`，分别用于添加和移除折叠面板。

在`addPanel`方法中，我们通过计算最后一个折叠面板的key来生成新的key，并使用`setPanels`方法将其添加到`panels`数组中。

在`removePanel`方法中，我们使用`filter`方法过滤出需要移除的折叠面板，并使用`setPanels`方法更新`panels`数组。

最后，在组件的渲染方法中，我们使用Antd的`Collapse`组件来渲染所有的折叠面板。我们还添加了一个`Button`组件，用于添加新的折叠面板。每个折叠面板中都有一个`Button`组件，用于移除该折叠面板。

希望这个例子能够帮助到你。如果你有任何问题，请随时问我。