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

最新推荐文章于 2023-10-05 15:40:59 发布
最新推荐文章于 2023-10-05 15:40:59 发布
阅读量1.5k 收藏
点赞数
分类专栏： 前端 文章标签： Ant Design react javascript 锚点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jasonzhang20100713/article/details/116209471
版权

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视窗
    很重要很重要很重要
ToBeOrNotToBe_Up
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ant design vue 锚点使用 Anchor 踩坑记录.pdf
12-16
ant design vue 锚点使用 Anchor 踩坑记录
react-anchor-link-smooth-scroll:使用平滑滚动polyfillReact锚链的组件
05-02
React锚链接平滑滚动 使用React锚链的组件。 指示 安装依赖项： npm install react-anchor-link-smooth-scroll 添加脚本 import React from 'react' import ReactDOM from 'react-dom' import AnchorLink from 'react-anchor-link-smooth-scroll' const SmoothScroll = ( ) => ( < div> < AnchorLink href = '#things'> Things < / AnchorLink > < AnchorLink href = '#stuff'> Stuff < / AnchorLink > < section id = 'things'> < h2
react-ant-admin：使用ant-design react react-hook ts开发的类ant-design-pro管理后台，具有完整的权限系统和配套的node + ts的api
02-05
React Ant管理员 开箱即用的中台前端/设计解决方案 预览： : 介绍 最开始的时候，我需要一个react开发的amdin模版，在开源社区寻找了一边之后，比较中意ant design pro的UI ，当我一堆操作把ant desgin pro desgin ant desgin pro的代码拉下来研究之后，发现内容是在太多了，除了react ， redux之外，还包含了umi ， dva ， ant-design/pro-layout等其他东西，当这些概念和ts结合起来使用的时候，我瞬间感觉无处下手，后面又仔细了阅读了权限设计，菜单栏渲染部分的代码，我重新定义了， Ant Desig
react-antd-admin:由React.js和Ant-design设计的简单管理面板
05-06
该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 而是将所有配置文件和传递依赖项（Webpack，Babel，ESLint等）直接复制
react-admin：基于React + ant-design的用于后台管理项目的脚手架
02-05
React管理员 React + Ant Design脚手架，专用作后台管理系统，反复在项目中实践和优化，功能齐全，细节完善，并提供丰富的示例代码，可以直接上手和开发。 技术选型 react + redux + react-router + ant-design +不可变+获取 redux-action + redux-logger 类名+ lodash ass webpack2 + react-hot-loader 埃斯林特 实现的功能 热加载 ES6 / 7 动态路由 动作日志打印 配置生成模拟接口 本地节点服务器 ESLint 萨斯 后记 获取数据 更多特性 除了主流的技术选型
简单使用antd vue Anchor锚点
z1010017573的博客
12-01 7372
antd的anchor组件在点击锚点后会修改URL，而单页应用中如果使用哈希模式的路由，当URL被修改后，刷新页面会导致当前路由没有定义而出现404的情况。 <template> <header id="top"> </header> <article id="cont"> </article> <a-anchor :affix="false" @click="handleAnchorClick">
Ant Design - Anchor
kelly0721的博客
10-18 7016
Anchor锚点 此组件的属性有以下几点： 现在给出一份例子 aaa bbb document.getElementById('center')}&amp;amp;amp;amp;amp;gt; 其他属性都很简单就不多说了，主要我遇到的麻烦是 getContainer 属性 锚点是默认body滚动的，所以如果你滚动的区域是body就会看到锚点的小蓝点是会随内容滚动的，但是如果你是自己自定义一个滚动...
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 design vue anchor getContainer 使用
最新发布
yangchao19920805的博客
10-05 761
【代码】记录 ant design vue anchor getContainer 使用。
06 antdesign react Anchor 不同页面之间实现锚点
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
02-16 2670
Anchor锚点是：用于跳转到页面指定位置。何时使用需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。简单使用antd中Anchor组件阻止默认路由跳转使用Anchor组件时，添加click方法:1、阻止默认事件 e.preventDefault();阻止link的href跳转路由事件；2、使用H5的scrollTo链接:react+antd中Anchor锚点踩坑===当前页面跳转，阻止点击事件的默认事件。
ant-design-charts:一个React图库
03-19
@ ant-design / charts 一个基于React图表库 特征 便于使用 打字稿 漂亮轻巧 React灵敏 评书 安装 npm $ npm install @ant-design/charts 用法 import React from 'react' ; import { Line } from '@ant-design/charts' ; const Page : React . FC = ( ) => { const data = [ { year : '1991' , value : 3 } , { year : '1992' , value : 4 } , { year : '1993' , value : 3.5 } , { year : '1994' , value : 5 } , { year : '1995' ,
react-anchorme::anchor:使用Anchorme.js的React组件检测文本中的URL和电子邮件，并将它们转换为可点击HTML链接
05-01
React锚 使用React组件检测文本中的URL和电子邮件，并将它们转换为可单击HTML链接。 :rocket: 安装 # npm npm i react-anchorme # Yarn yarn add react-anchorme :trackball: 用法 基本用法 组件将字符串作为子代，检测其中的url，电子邮件，IP地址，并将其替换为可单击HTML链接。 import React from 'react' import { Anchorme } from 'react-anchorme' const SomeComponent = ( ) => { return ( < Anchorme> Lorem ipsum http://example.loc dolor sit amet < / Anchorme > ) } 定制道具 您可以设置应用于组件创建的每个链接的自定义锚Struts
ant-design-mobile-rn：用于React Native的Ant设计
02-01
English |蚂蚁设计移动RN 可配置的...pod installyarn ios # or yarn android安装与使用$ npm install @ant-design/react-native --save 要么yarn add @ant-design/react-native安装对等依赖项（4.0.0+） npm inst
Ant Design Table组件 控制表头的显示与隐藏
ToBeOrNotToBe_CheerUp的博客
03-13 1万+
需求：当切换时间纬度的时候，表格需要增加某字段。即当统计纬度为时间A时，需要增加X字段，统计纬度为时间B的时候，不需要X字段 思路：根据时间纬度的状态，控制X字段的显示隐藏，从而增强Table组件的可复用性 //我们需求的那个字段columns { title: '字段X', dataIndex: 'xCode', key: 'xCode', filterType: props....
自定义 Eharts 柱状图 当数值为“0”时，不显示（亲测有效！）
ToBeOrNotToBe_CheerUp的博客
12-07 5184
需求：自定义 Eharts 柱状图 当数值为“0”时，不显示（亲测有效！） //series.label normal:{ formatter: function(params){ if (params.value &gt; 0) { return params.value; }else { return ''; } } } ...
leaflet地图自定义白色虚线
ToBeOrNotToBe_CheerUp的博客
02-19 3047
需求：使用白色虚线描绘省际边界 //js部分 const polyline2 = L.polyline(latlngs, {weight: 6, className: 'dashLines', opacity: 0.5}) .addTo(leafletMap); leafletMap.fitBounds(polyline2.getBounds()); //css部分 /*stroke-d...
了解这个CSS属性：clamp()，自适应布局，事半功倍！
ToBeOrNotToBe_CheerUp的博客
11-09 1351
clamp() MDN Web Docs说明 The clamp() CSS function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum. It takes three parameters: a minimum value, a preferr
overwrite重写Ant-Design Pagination组件样式
ToBeOrNotToBe_CheerUp的博客
02-26 1036
效果图如下图所示 code :global(.anticon) { color: white; font-size: 1rem; } :global(.ant-pagination-item) { background-color: transparent !important; border: 0px solid transparent !important...
react ant-design-mobile tabBar 路由
04-25
你想了解关于 react ant-design-mobile tabBar 路由的内容，对吗？那么，react ant-design-mobile 是一个提供 UI 组件库的开源项目，而 tabBar 路由是指在移动应用中用来导航不同页面的标签栏。在 react ant-design-mobile 中，你可以使用它的 TabBar 组件来创建一个具有路由功能的标签栏。如果你想更深入了解这个话题，我可以给你提供一些相关的教程和资料。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值