Ant Design Collapse组件提供了一个onRemove属性,可以在Collapse面板上添加一个关闭按钮。下面是一个包含代码示例的解决方法:
import React, { useState } from 'react';
import { Collapse, Button } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
const { Panel } = Collapse;
const CustomCollapse = () => {
const [panels, setPanels] = useState([{ key: '1' }, { key: '2' }, { key: '3' }]);
const handleRemove = (key) => {
const updatedPanels = panels.filter(panel => panel.key !== key);
setPanels(updatedPanels);
};
return (
{panels.map(panel => (
}
onClick={() => handleRemove(panel.key)}
/>
}
>
Content of panel {panel.key}
))}
);
};
export default CustomCollapse;
在这个示例中,我们使用useState钩子来维护一个panels数组,每个面板都有一个key属性。通过map函数,我们遍历panels数组,并为每个面板添加一个关闭按钮。当点击关闭按钮时,我们调用handleRemove函数,它使用filter方法从数组中删除对应的面板。最后,我们将更新后的panels数组传递给Collapse组件。
在这个例子中,我们使用了Ant Design的Button组件和CloseOutlined图标,但你也可以根据自己的需求自定义按钮的样式和图标。