react中的a标签href引发重新渲染

现象:<li><a href="#">关于我们</a></li> 点击会使页面刷新,所以改变数据会误以为不生效; 所以要用:<li><a href="javascript:void(0)">关于我们</a></li>

    <li><a href="#">关于我们</a></li>
    
    <a> 标签的 href 属性用于指定超链接目标的 URL。点击这个超链接,页面会跳转到对应的页面,如果这个值为空,则会以本页面地址进行跳转,也就是刷新页面

   其次,<a> 标签的 href 属性也可以用于锚点跳转,锚 URL - 指向页面中的锚(href="#top"),此时点击a标签,页面会定位到id为top的元素那里

   最后,<a> 标签的 href 属性也可以用于路由跳转,href="#/slgl/ywgz",此时点击a标签,会改变页面路径的hash值 ==> http://10.34.0.105/slgl/#/slgl/ywgz,这个常用于现代框架的路由跳转

   一般的,如果不想a标签点击有上面三个行为,js方面可以如一楼讲的阻止默认事件,通过a元素href属性本身的特性可以有下面几种:

   1、不写href属性,那此时的a元素就是一个本本分分的行内元素,和span标签差不多,不会有下划线,激活样式等特性

   2、href='#',意思就是给你一个空锚点,不做跳转操作,但是要注意,会改变url的hash值

   3、建议使用的,href="javascript:void(0)"
复制代码
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值