Ant Design中折叠面板Collapse

Posted 2023-03-15

参考技术A 这段时间做react项目遇到一些平常并不会去在意的问题，但解决的时候又需要思考一番。这次开发用到了蚂蚁金服的UI框架Ant Design。项目中有一个模块的样式和功能用到了折叠面板Collapse组件来实现。但是开发完成后有一个问题被产品提到了。

问题是这样的，因为我们有一个公告展示的列表，是分页展示的，当用户在第某一页面打开一个或多个面板并且没有关闭就去点击其他的页码，当他再次返回到当前页面时折叠面板仍然是展开的。产品的要求是当用户在某一页打开折叠面板，从别的页面再次回来的时候要求折叠面板都关闭。我感觉这个并不影响什么，既然产品提出来了我们就要着手解决他。

翻看了官方文档提供的API动手实践了一下发现可以通过activeKey(数字数组/字符串数组)属性和事件onChange来实现。接下来我们来看看实现的方法(可能还有很多更好的方法，我目前只想到了这一种，有更好实现的大佬希望可以指教，感谢！)。在这个项目中用的react的新特性hooks，而且由于消息分类页面有好几个所以是把Collapse抽离出来一个组件，所以涉及到了组件之间的传值。

抽离的Collapse(子组件)组件：

引用Collapse的组件(父组件)