react+antd中Anchor锚点踩坑

一、问题:

点击锚点后,没有按想象中的实现锚功能(想展示的部分在页面最顶部),而是路由跳转了
于是仔细检查了下是不是自己写法有问题:

1、antd官方写法:
在这里插入图片描述
2、我的写法
在这里插入图片描述
3、现象
在这里插入图片描述
没觉得有什么毛病啊!!!

二、原因

antd Anchor底层是使用的a标签实现锚点功能的,而a标签的默认行为就是路由跳转(跳转到href),只要阻止a标签的默认行为就可以了

三、解决办法

阻止a标签的默认行为

handleAnchorClick = (e,link) => {
        e.preventDefault();
    };

在这里插入图片描述

四、其他坑

啊,我真的是!改完自测,发现其他锚点都正常,#basic的锚点就是无效,由于以前初学时经常出现这种问题,一下子就反应过来了,basic是关键字啊(在这里内心吐槽一万遍,谁给我挖的坑),于是改成其他的就可以了,大家命名时还是要注意避免一下的

五、其他解决办法测试(可以不用看了,都没写出来)

1、location.hash+"#id" (无效)
各种翻博客,看到有说在href中加hash的,于是试了一下:
在这里插入图片描述

在这里插入图片描述
结果:每点一次,都在路由后面加了当前锚点链接,而且并没有实现锚功能(也不知道是不是自己写的有问题)

2、scrollIntoView方法()
3、不用Anchor()

评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值