react+antd的tab页切换的时候修改其隐藏内容的方式

tab切换应该是显示对应的内容，tab页组件得封装是切换tab的时候，内容是visibility方式隐藏改为display方式隐藏，导致切换tab，但是之前的tab的内容还占着文档流位置，把当前的内容几道下面去了，效果图如下：不相互影响布局

 

 

 

思路：获取所有的tab对应的内容，然后循环遍历的时候单独判断是否是当前选中tab对应的内容,不是当前的就换为display方式隐藏，不占正常的文档流位置

代码参考：

//获取所有tab对应的内容
setActiveContent = ()=>{
    let allDom = document.getElementsByClassName('ant-tabs-tabpane');
    for (let j in allDom){
        if (allDom.hasOwnProperty(j)){
            let i = allDom[j];
            if (i.className.includes('ant-tabs-tabpane-active')){//当前显示的内容
                i.style.display = 'block';
            }
            else {
                i.style.display = 'none';
            }
        }
    }
}