本文介绍了如何在React应用中结合Antd库动态修改Tab组件的选中样式。当进行增删操作时，需要同步更新activeKey并调整样式。删除时，无论顺序如何，都要更新样式；新增时，默认显示新数据的Tab标签。通过获取所有Tab节点，遍历并根据当前选中状态设置不同的样式类。在React中，作者发现直接添加样式类可能会因权重问题导致失败。
原图
效果图
思路：tab有增删，我这里是根据目录显示tab标签有选中同一个的，其实tab本身的切换也算选中同一个，
1、删除某个的时候，activeKey变得同时，样式也要跟着变，不管是有顺序的删除还是无序的删除
2、新增的时候，我这里的数据结构是都在最后一个加新数据，如果不是选中同一个，都是默认显示新增的数据的tab标签，也可以放最前面
3、我这里是根据组件的className来判断的，获取到所有的标签document.getElementsByClassName('ant-tabs-tab')节点
4、循环遍历的时候根据是否是当前选中的和没选中的来进行样式赋值，react中，我试了一下，目前就这种方式支持，我添加class，都不成功，可能是class的权重问题
3039
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
最低0.47元/天 解锁文章
