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

最新推荐文章于 2023-08-03 18:08:15 发布

原创最新推荐文章于 2023-08-03 18:08:15 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs #es6 #tab

本文介绍了在使用React+Antd组件库时遇到的Tab页内容切换但之前内容仍占用布局的問題。通过修改Tab内容的隐藏方式，从visibility更改为display，以确保非当前选中Tab的内容不再影响文档流。解决方案包括获取所有Tab内容并循环遍历，设置非当前选中Tab内容的display属性为none。

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';
            }
        }
    }
}