React中 Ant-Design Anchor到底应该怎么用？

最新推荐文章于 2025-10-06 03:09:29 发布
原创 最新推荐文章于 2025-10-06 03:09:29 发布 · 1.9k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Ant Design #react #javascript #锚点

本文介绍了在React中使用Ant Design的Anchor组件时应注意的要点，包括Link组件的href属性与容器id的对应，以及在React路由环境中如何正确实现锚点定位。特别强调了一点，务必指定容器，因为默认是整个window视窗，不指定可能导致定位失败。通过实例展示了如何避免点击链接后只改变hash但未定位到相应内容的问题。
部署运行你感兴趣的模型镜像

React中 Ant-Design Anchor到底应该怎么用？

Ant-Design官网API：https://ant-design.gitee.io/components/anchor-cn/

几个点注意一下：

  1. Link组件是href属性对应容器id
  2. 在React中a标签指向路由，（即会出现点击出现hash路由变化了，而未定位对应容器所在位置），只需要自定义点击事件，官方文档也有例子：
    自定义点击事件
  3. 最重要的一点，我踩坑的地方！！！！
    一定要指定容器，因为默认的是整个window视窗
    很重要很重要很重要

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

Stable-Diffusion-3.5

图片生成
Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率

Ant Design使用
qq_43260366的博客
01-10 3282
Anchor组件 用于包裹Link组件affix 是否固定为固定模式， 默认为固定模式若是固定模式(true) :Anchor组件在滑动到当前组件之前是静态定位，滑动到当前组件之后为固定定位(固定在可视窗口的最顶端)若是非固定模式(false):Anchor组件一直都为静态定位(不脱标)举例说明 -> 案例1targetOffset:锚点滚动偏移量,默认为0若是设置偏移量：对应元素不是滑动到当前元素的最顶端而是最顶端下移对应偏移量举例说明-> 案例2。
react+antd Anchor(锚点组件)通讯录字母索引实现
前端开发-前端技术分享
07-03 1277
基于React框架开发的通讯录页面，结合AntDesign组件库和TailwindCSS实现。核心功能包括字母分组展示联系人、右侧字母索引导航（使用AntDesignAnchor组件）、响应式布局和美观的UI设计。技术亮点包括React组件化开发、深度定制的AntDesignAnchor组件、TailwindCSS原子化样式，以及平滑滚动和吸顶效果优化。该方案适用于各类联系人管理系统，具有高扩展性，支持后续集成搜索等附加功能。文中还提供了完整的源码实现，特别解决了Anchor组件在弹框内使用的滚动容器问题。
Ant Design - Anchor
kelly0721的博客
10-18 7281
Anchor锚点 此组件的属性有以下几点： 现在给出一份例子 aaa bbb document.getElementById('center')}> 其他属性都很简单就不多说了，主要我遇到的麻烦是 getContainer 属性 锚点是默认body滚动的，所以如果你滚动的区域是body就会看到锚点的小蓝点是会随内容滚动的，但是如果你是自己自定义一个滚动...
React开发（138）:ant design学习指南之anchor处理
歌谣的博客
09-08 485
层级处理
Ant Design锚点组件：Anchor与页面导航实现
最新发布
gitblog_01005的博客
10-06 397
在现代Web应用开发中，长页面内容的导航体验直接影响用户体验。当用户面对大量信息时，如何快速定位到目标内容？Ant Design的Anchor（锚点）组件为这一问题提供了优雅的解决方案。本文将深入探讨Anchor组件的核心功能、使用场景及实现方式，帮助开发者轻松构建高效的页面导航系统。 ## 组件概述与核心价值 Anchor组件是Ant Design提供的页面内导航解决方案，通过固定在页面侧边...
ant design vue 锚点使用 Anchor 踩坑记录.pdf
12-16
ant design vue 锚点使用 Anchor 踩坑记录
react学习(63)--ant design 锚点
歌谣的博客
07-27 573
import { Anchor } from 'antd'; const { Link } = Anchor; const onChange = link => { console.log('Anchor:OnChange', link); }; ReactDOM.render( <Anchor affix={false} onChange={onChange}> <Link href="#components-anchor-demo-basic" title.
react使用antd(ant design)锚点并悬浮
热门推荐
旭旭1998的博客
09-05 7万+
import React from 'react' import { Anchor } from 'antd'; import { Layout } from 'are-common'; const { Sider, Content } = Layout; const { Link } = Anchor; const hello: React.FC = (props) => { // const [targetOffset, setTargetOffset] = useState<nu
ant-anchor兼容性
06-13
`ant-anchor` 是 Ant Design 框架中的一个组件，主要用于页面内跳转功能[^2]。然而，在实际使用中可能会遇到一些兼容性问题，这些问题通常与浏览器的行为、CSS 样式调整以及框架本身的实现细节有关。 #### 1. ...
Ant Design前端框架-其他
06-11
<p><span xss=removed>Ant Design 是阿里开源的一套企业级的 UI 设计语言和 React 实现，使用 TypeScript 构建，提供完整的类型定义文件，自带提炼自企业级中后台产品的交互语言和视觉风格、开箱即用的高质量 React ...
ant design react表单锚点使用方法
03-21
### Ant Design React 表单中的锚点使用 在 Ant Design 中，`Anchor` 组件提供了实现页面内跳转的功能。如果希望在 React 表单中集成锚点功能，则可以通过 `Form` 和 `Anchor` 的组合来完成这一需求。 以下是具体...
ant design vue 锚点使用和 普通的HTML 链接 - name 属性 - 锚（anchor）
pipizhou16的博客
06-30 5595
ant design vue 锚点使用和 普通的HTML 链接 - name 属性 - 锚（anchor）
React（75）--ant design 锚点
歌谣的博客
07-28 361
import { Anchor } from 'antd'; const { Link } = Anchor; ReactDOM.render( <Anchor> <Link href="#components-anchor-demo-basic" title="Basic demo" /> <Link href="#components-anchor-demo-static" title="Static demo" /> <Lin.
简单使用antd vue Anchor锚点
z1010017573的博客
12-01 7990
antd的anchor组件在点击锚点后会修改URL，而单页应用中如果使用哈希模式的路由，当URL被修改后，刷新页面会导致当前路由没有定义而出现404的情况。 <template> <header id="top"> </header> <article id="cont"> </article> <a-anchor :affix="false" @click="handleAnchorClick">
06 antdesign react Anchor 不同页面之间实现锚点
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
02-16 4038
Anchor锚点是：用于跳转到页面指定位置。何时使用需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。简单使用antd中Anchor组件阻止默认路由跳转使用Anchor组件时，添加click方法:1、阻止默认事件 e.preventDefault();阻止link的href跳转路由事件；2、使用H5的scrollTo链接:react+antd中Anchor锚点踩坑===当前页面跳转，阻止点击事件的默认事件。
Ant-Design源码分析——Anchor
qq_46025739的博客
12-26 1359
2021SC@SDUSC anchor锚点的位置用于快速定位链接的指定位置 先来看下接口内定义的参数 export interface AnchorProps { // 前缀信息 prefixCls?: string; // 类名 className?: string; // 样式 style?: React.CSSProperties; // 子类对象 children?: React.ReactNode; // 距离窗口顶端的偏移量 offsetTop?:
ant design --react 更改锚点样式（傻子都能看懂）
画龍丶的博客
06-14 1113
修改ant design 锚点样式
antd中的锚点跳转
m0_47999208的博客
11-27 295
【代码】antd中的锚点跳转。
自定义锚点组件解决在路由为哈希模式下使用antd的anchor组件存在的问题
weixin_43996368的博客
05-24 1807
自定义锚点组件解决在路由为哈希模式下使用antd的anchor组件存在的问题 antd的anchor组件通过修改URL来定位锚点跳转位置，而单页应用中如果使用哈希模式的路由，会导致当前路由没有定义而出现页面空白。 解决方案1——重写antd组件的点击事件 const handleClick: AnchorProps['onClick'] = (e, link) => { e.preventDefault(); var srcolls = document.getElementById(l
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值