React单页面应用使用antd的锚点跳转失效

最新推荐文章于 2023-10-18 09:17:39 发布
最新推荐文章于 2023-10-18 09:17:39 发布
阅读量2.1k 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/yyxh/p/10338167.html
版权
本文探讨了在React单页面应用中，使用antd实现锚点跳转遇到的问题及解决办法，主要聚焦于JavaScript环境下的实现细节。
摘要由CSDN通过智能技术生成

首先在react项目中引用antd的锚点

import {Anchor} from 'antd';
const { Link } = Anchor;
<Anchor>
    <Link href="#components-anchor-demo-basic" title="Basic demo" />
    <Link href="#components-anchor-demo-static" title="Static demo" />
    <Link href="#API" title="API">
        <Link href="#Anchor-Props" title="Anchor Props" />
        <Link href="#Link-Props" title="Link Props" />
    </Link>
</Anchor>
//测试
<div id="components-anchor-demo-basic" style={
  {marginTop:"1000px"}}>
    dddd
</div>
<div id="components-anchor-demo-static" style={
  {marginTop:"2000px"}}>
    ffff
</div>
最低0.47元/天 解锁文章
weixin_30692143
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
antd 页面跳转_React单页面应用使用antd的锚点跳转失效
weixin_35501677的博客
01-13 1516
首先在react项目中引用antd的锚点import {Anchor} from 'antd';const { Link } = Anchor; //测试 dddd ffff发现页面进行跳转而不是点位到页面的锚点，发现url有所改变解决办法:加上location.hash可以解决React不引入antd如何实现锚点跳转代码如...
【react】单页面锚点
qq_33539213的博客
12-12 534
场景： 选择时页面滚动到对应到div。 scrollToAnchor = anchorName => { if (anchorName) { const anchorElement = document.getElementById(anchorName); if (anchorElement) { try { /...
react+antd锚点无效
qq_34955596的博客
09-18 836
上代码 注：需阻止Anchor默认事件 // 阻止link默认行为 const handleAnchorClick = (e) => { e.preventDefault(); }; <Anchor onClick={handleAnchorClick}> <Link href="#join-Join" className={styles.buttons} title="TO HRER" /> </Anchor>
antd tabs+anchor遇到的BUG，切换锚点anchor功能失效
qq_36384745的博客
03-25 2143
antd tabs切换时anchor失效，anchor只对第一页面生效，切换选项卡anchor失效
antdv 锚点踩坑
最新发布
peppa_pig的博客
10-18 1159
背景：使用antd的锚点时，按照官方文档的用法配置之后发现锚点组件的锚点Title位置没办法随着我的页面滚动而变化，但是点击Title跳转具体锚定位置的功能却是没有问题的。解决方法：getContainer绑定滚动范围容器。
react单页面应用react单页面应用react单页面应用
01-28
在React单页面应用中，`src`目录是主要的源代码存放地，通常包括以下结构： 1. `App.js`或`index.js`: 应用的入口文件，这里会定义整个应用程序的根组件。 2. `components`目录：存放各种自定义的React组件，每个...
react-基于Webpack的React单页面应用脚手架
08-14
在现代Web开发中，React作为一个流行的JavaScript库，用于构建用户界面，尤其是单页面应用程序（SPA）。而Webpack作为模块打包工具，能够将各种资源如JavaScript、CSS、图片等整合在一起，为复杂的前端项目提供强大...
react使用antd表单赋值,用于修改弹框的操作
01-18
补充知识：react中使用antd的表单重置数据 resetFields 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 Function([names: string[]]) 注：initialValue有值时会
2022升级 React18+TS高仿AntD从零到一打造组件库
09-02
在本课程"2022升级 React18+TS高仿AntD从零到一打造组件库"中，我们将深入探讨React最新版本18的特性，结合TypeScript（TS）的强大类型系统，以及如何模仿流行的Ant Design（AntD）框架，来创建一个自定义的组件库。...
ReactNative页面跳转实例代码
09-01
在React Native中，页面跳转是一个常见的需求，用于在应用的不同视图或组件间切换。本实例将详细介绍如何在React Native中实现页面间的导航。以下是你需要知道的关键知识点： 1. **初始化项目**： 首先，通过`...
react+antd中Anchor锚点踩坑
热门推荐
11-20 1万+
一、问题： 点击锚点后，没有按想象中的实现锚功能（想展示的部分在页面最顶部），而是路由跳转了 于是仔细检查了下是不是自己写法有问题： 1、antd官方写法： 2、我的写法 3、现象 没觉得有什么毛病啊！！！ 二、原因 antd Anchor底层是使用的a标签实现锚点功能的，而a标签的默认行为就是路由跳转（跳转到href），只要阻止a标签的默认行为就可以了 三、解决办法 阻止a标签的默认行为 handleAnchorClick = (e,link) => { e.preventDe
React锚点滚动的问题
MYG_G
12-30 1268
参考文献：https://segmentfault.com/a/1190000023881414 React锚点滚动，传统的a标签写法如下 <a href = '#div'>To div</a> <div id= 'div'>DIV</div> 这种写法点击a标签就会跳转，并且伴随路由的改变。 我们可以使用scrollIntoView方法来实现滚动效果 scrollIntoView方法可配置参数 它接受两种形式的值：布尔值或对象。接受布尔值主要还是为了兼容不
React中解决锚点跳转问题
weixin_36659134的博客
12-20 6157
在React项目中，需要做锚点跳转 只需要添加一个 因为React中不能直接加ID，只能加上a标签 亲测可用，可以放心使用~~~
React实践：React中使用antd anchor 锚点不跳转问题记录【已解决】
qq_40937541的博客
10-17 1749
在一个高度大于屏幕可视高度的页面，使用锚点定位到指定位置
关于锚点页内链接跳转出现问题(不响应,没有反应)的解决方法(ZT)
weixin_30779691的博客
11-05 2727
我们知道，利用锚点可以实现页面链接跳转，也可以实现同一页面内的跳转功能。 例如：<a href="somepage.htm>某页面链接</a> 可以跳转链接到somepage.htm，<a href="#top">回顶端</a> 可以跳转到同一页面中，我们定义的锚点<a name="top"></a>所在位置。 但有时...
Ant Design - Anchor
kelly0721的博客
10-18 7065
Anchor锚点 此组件的属性有以下几点： 现在给出一份例子 aaa bbb document.getElementById('center')}&amp;amp;amp;amp;amp;gt; 其他属性都很简单就不多说了，主要我遇到的麻烦是 getContainer 属性 锚点是默认body滚动的，所以如果你滚动的区域是body就会看到锚点的小蓝点是会随内容滚动的，但是如果你是自己自定义一个滚动...
antd Anchor锚点踩坑 没动画 高亮
m0_61125795的博客
05-21 1421
1.如果容器是window的话。滚动页面高亮锚点没跟着改变 检查body的高度 或者说容器高度 是不是100vh 2.点击锚点没有滚动条动画的话 加上 e.preventDefault() 阻止使用a标签跳转 <Anchor className={styles.AnchorWrap} onClick={handleClick}> // onClick={handleClick} 加上这个 {anchorText.map((item, index) =&
ant design 锚点采坑一 无滚动效果
weixin_34055910的博客
03-05 9034
本次目标是 类似于 目录和内容关系 指定区域进行滚动无效原因 猜测：没有设置目标区域的高度 以及 超出之后 出现滚动条&lt;Row gutter={16}&gt; &lt;Col span={6}&gt; &lt;Card title="目录" bordered={false}&gt; // 设置指定目标容器 记得带上 官方事件 这样就不会 ...
umi react 单页面应用
09-07
对于使用 Umi 和 React 构建单页面应用，可以按照以下步骤进行： 1. 安装 Umi：首先，确保你的项目已经安装了 Node.js，然后在命令行中运行以下命令来全局安装 Umi： ``` $ npm install -g umi ``` 2. 创建新...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值