AntDesign 使用Tabs 遇到的问题(没有隐藏、出现重复tabpanel等

activeKey未设置

使用Tabs发现第一个标签莫名重复了一个，并且页面上一直显示该标签下的组件

PS. 我写完前端其他内容，来写这篇文章改回原来的代码时，发现这个bug再没法复现，一切都诡异地正常运转

原来的代码

<Tabs>
	 <Tabs.TabPane tab='基本信息' key='1'>
	 ..... //这里的组件元素重复渲染
	 </Tabs.TabPane>
	 <Tabs.TabPane tab='附件' key='2'>
	 ..... 
	 </Tabs.TabPane>
	
</Tabs>

加入控制activeKey后解决

const [tabActiveKey, settanActiveKey] = useState('1');//标签
<Tabs type='card' activeKey={tabActiveKey} onChange={(key) => { settanActiveKey(key) }} defaultActiveKey='1'>
   	<Tabs.TabPane tab='基本信息' key='1'>
	 ..... 
	 </Tabs.TabPane>
	 <Tabs.TabPane tab='附件' key='2'>
	 ..... 
	 </Tabs.TabPane>
</Tabs>

hidden样式被覆盖

在写样式覆盖默认样式时，要记得在类名后面添加active，不然会其他本该隐藏的标签页的hidden属性，使其显示出来

.ant-tabs-tabpane-active {
                gap:16px;
                display: flex;
                flex-direction: column;
            }

Tabs下显示的页面外层div如下

隐藏的界面外层div

对应样式：

}
.ant-tabs-tabpane-hidden {
    display: none;
}

因此覆盖ant-tabs-tabpane样式，选择器任然会选到隐藏的界面（class=“ant-tabs-tabpane ant-tabs-tabpane-hidden”），从而覆盖掉其本身的 display:hidden 属性，让其显示出来