antd tabs+anchor遇到的BUG，切换锚点anchor功能失效

最新推荐文章于 2023-12-21 14:02:46 发布

StupigYy

最新推荐文章于 2023-12-21 14:02:46 发布

阅读量2.1k

点赞数 2

文章标签： react html5 css

本文链接：https://blog.csdn.net/qq_36384745/article/details/123740806

版权

所做项目需要使用到ant design的tab切换，但是点击选择第二选项卡（TabPane）时，anchor锚点失效了，从开发者工具里可以看到，tabs的切换不是类似切换页面来实现的，而是切换TabPane的内容，而anchor的跳转是使用a标签来实现跳转，基于获取元素id，但是id在同一页面具有唯一性,所以anchor只会对第一TabPane的id实现功能，刚开始的时候代码是

impoer Tabs from "antd";
const { TabPane } = Tabs;

render{
    return(
        ......
        //此处this.data长度大于2
            this.data.map(
                (item,index) => {
                     return(
                         <TabPane
                             tab={item}
                             key={index}
                         >
                             <div
                                 className={style.anchorDiv}
                             >
                                 <Anchor
                                     className={style.anchor}
                                     onClick={this.handleAnchorClick}
                                     //此处偏移量也踩了坑，另外单说
                                     targetOffset={window.innerHeight/2}
                                 >
                                     <Link href='#box1' title="box2" />
                                     <Link href='#box2' title="box2" />
                                 </Anchor>
                             </div>
                             <div id='box1' style={{height:'1000px}}></div>
                             <div id='box2' style={{height:'1000px}}></div>  
                         </TabPane>
                    )
                }
            )
    )
}

此时会发现切换TabPane的时候，anchor功能失效了，f12会看到，TabPane的div下有两个(此数量基于this.data.length)同样的id为box1的盒子，所以会失效，后来想了一个办法，鉴于index来生成一个动态id，就可以解决切换时anchor跳转的id不唯一的情况，

impoer Tabs from "antd";
const { TabPane } = Tabs;

render{
    return(
        ......
        //此处this.data长度大于2
            this.data.map(
                (item,index) => {
                     return(
                         <TabPane
                             tab={item}
                             key={index}
                         >
                             <div
                                 className={style.anchorDiv}
                             >
                                 <Anchor
                                     className={style.anchor}
                                     onClick={this.handleAnchorClick}
                                     //此处偏移量也踩了坑，另外单说
                                     targetOffset={window.innerHeight/2}
                                 >
                                     <Link href={'#box1'+index} title="box2" />
                                     <Link href={'#box2'+index} title="box2" />
                                 </Anchor>
                             </div>
                             <div id={'box1'+index} style={{height:'1000px}}>                                                                    
                             </div>
                             <div id={'box2'+index} style={{height:'1000px}}> 
                             </div>  
                         </TabPane>
                    )
                }
            )
    )
}

此时切换的时候每个id都是唯一的，即可解决tabs切换时新内容anchor失效的问题，但是每个TabPane里都放一个anchor还是放TabPane外面，这个没有测试。

希望踩过的坑可以帮到卡在这里的小伙伴，如果有更好的办法或者意见可以随时交流，谢谢！