在onClick上使用ref滚动到某个部分，而不是使用props重定向
，可以通过以下步骤实现：
- 首先，在需要滚动到的目标部分上添加一个ref属性，用于在代码中引用该元素。例如，可以给目标部分的容器元素添加ref属性：
<div ref={scrollRef}>...</div>。 - 在组件的构造函数中，创建一个ref对象来保存目标部分的引用。例如：
constructor(props) { super(props); this.scrollRef = React.createRef(); }。 - 在onClick事件处理函数中，使用ref对象的current属性来获取目标部分的引用，并调用scrollIntoView()方法来实现滚动。例如：
handleClick() { this.scrollRef.current.scrollIntoView({ behavior: 'smooth' }); }。 - 将onClick事件处理函数绑定到需要触发滚动的元素上。例如：
<button onClick={this.handleClick}>滚动到目标部分</button>。
这样，当点击按钮时，页面将平滑滚动到目标部分。
这种方法的优势是可以在前端开发中方便地实现滚动效果，而不需要使用props重定向到其他页面。它适用于单页面应用程序中的内部导航，例如滚动到页面的不同部分或滚动到某个特定的元素。
腾讯云提供了丰富的云计算产品，其中与前端开发和滚动相关的产品包括：
- 腾讯云CDN（内容分发网络）：提供全球加速、缓存加速、动态加速等功能，可加速网站内容的传输和分发，提升用户访问体验。产品介绍链接：https://cloud.tencent.com/product/cdn
- 腾讯云Web应用防火墙（WAF）：提供全面的Web应用安全防护，包括防护DDoS攻击、Web攻击、敏感信息泄露等。可以保护网站免受恶意访问和攻击。产品介绍链接：https://cloud.tencent.com/product/waf
请注意，以上只是腾讯云的部分产品示例，更多产品和详细信息可以在腾讯云官方网站上找到。
相关·内容
2回答
请教几个有关腾讯CDN的问题？
内容分发网络 CDN、对象存储
第一，这个腾讯云cdn和百度的云加速那种是一样的吗？和腾讯云的COS有什么区别，腾讯云的COS貌似和七牛云储存的加速是一样的，需要把文件同步到云储存里面，然后再独立设置一个img或者cdn的二级域名绑定，然后再将站内的静态资源链接替换掉。这个腾讯云cdn是不是和百度的云加速那样，只需要把www域名CNAME解析好就行，不需要单独设置cdn或者img二级域名。第二，腾讯云的cdn应该和八度的云加速是一样的，但是我看这个文档说的：[图片]这个不能和源站一致我就没搞懂了，不就应该和源站是一致的吗？第三：这个腾讯云cdn有没有抗D的功能谢谢解答
浏览 1079提问于2017-06-28
4回答
请各位大给个参考方案，存储相关？
对象存储
200GB的档案，需要存放在腾讯云产品上，供第三方下载，第三方在200家左右。需要有WEB登录界面，账号权限分配，看了一下对象存储，流量收费有点贵。
除了对象存储，只能租用主机自己搭建FTP吗？还有其他方案吗？
如果自己租用主机搭建环境，对于200家下载需要选择多少的带宽能保障他们的下载速度呢？
浏览 719提问于2017-08-29
1回答
如何从一个组件滚动到另一个组件的元素？
javascript、reactjs、scroll、scrollto
我有两个组件，组件A和组件B，它们在同一个页面中呈现。我需要的是，一旦单击组件A中的一个按钮，就滚动到组件B的div。
组件B：
import React, { FC, useRef } from 'react';
const Footer: FC<Props> = ({ children }) => {
const commentSection = useRef(null);
const gotoCommentSection = () => window.scrollTo({top: commentSection.current.offsetTop,
浏览 4提问于2021-02-13得票数 0
2回答
反应滚动到渲染的顶部--通常的答案似乎不起作用。
reactjs、typescript、react-router-dom
我有一个具有左侧导航栏的React应用程序，然后在右边呈现页面。当我在右边查看一个页面并向下滚动，然后使用导航条转到另一个页面时，新页面将以与前一页相同的滚动位置呈现。我希望新的页面始终呈现滚动到顶部。
在过去的几天里，我读了很多书，每个人似乎都认为解决方案是使用useEffect，如下所示：
const location = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [location]);
这是完全合理的，而且我从调试中知道，每当URL更改时，效果就会运行，就像预期的那样。问题是，调试似乎
浏览 1提问于2021-11-24得票数 2
回答已采纳
1回答
为AWS启用日志在CDK中不起作用
amazon-web-services、amazon-cloudformation、aws-cdk
我的目标是通过AWS为区域性WebAcl启用日志记录。这个在云的形成和CDK中有适当的构造。但是当使用以下代码创建日志组并将其链接到中时.
const webAclLogGroup = new LogGroup(scope, "awsWafLogs", {
logGroupName: `aws-waf-logs`
});
// Create logging configuration with log group as destination
new CfnLoggingConfiguration(scope, "webAclLoggingCo
浏览 15提问于2022-08-15得票数 1
回答已采纳
1回答
为什么react-single-page导航只能在没有构造函数和状态的组件中工作？
reactjs、react-router、navigation、reactjs.net
我目前正在学习react，我发现了一个很酷的包：https://www.npmjs.com/package/react-single-page-navigation。 我开始使用它，一切都很顺利。然后我想让我的web应用程序响应，所以我为小屏幕构建了一个移动导航(简单的下拉菜单)。 首先，这个导航也起作用了！下拉列表总是显示出来的，我可以用它们的引用点击按钮，我可以通过平滑的滚动导航到想要的部分。由于dropdown的显示和隐藏功能，我向移动导航组件添加了一个带有状态menuVisible的构造函数，并添加了两个函数来处理单击"open dropdown“按钮和单击下拉项以外的其他位
浏览 17提问于2020-12-22得票数 0
回答已采纳
1回答
react中有没有一种方法可以将用户从一个页面重定向到另一个页面的底部
reactjs、react-router、window.location
我需要一个重定向从一个页面反应到另一个页面的底部时，用户触摸一个按钮。 const goCart = () => {
if(window.location.pathname !== '/products'){
window.location.assign(ProductsPageLink());
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
}
else{
window.scrollTo({ top: do
浏览 12提问于2021-10-02得票数 0
11回答
腾讯云上如何自建DNS？
云服务器、DNS 解析 DNSPod、linux、centos、dns
当前腾讯云私有域VPCDNS暂时还不支持背景下，怎么在腾讯云CVM环境下构建内网解析？
实现功能：
1.支持腾讯云云环境保留域名解析如：mirrors.tencentyun.com;
2.支持用户自有业务域名内部网解析如：you.aaa.com；
3.支持访问外网域名解析如：www.qq.com；
4.支持分域名转发到不同的DNS服务器；
基础环境：
CVM：标准型SA2（请根据自身业务情况，选择样本）
操作系统：CentOS Linux版本7.6.1810（核心）
绑定：bind-9.11.4-16.P
浏览 1390提问于2021-01-27
3回答
使用onClick滚动React.fowardRef不起作用
javascript、reactjs、react-ref、js-scrollintoview
我想知道如何使用React refs导航到特定的组件。
function App() {
let CompetencesRef = React.createRef();
let ExperiencesRef = React.createRef();
let FormationRef = React.createRef();
let RecoRef = React.createRef();
let refs = { CompetencesRef, ExperiencesRef, FormationRef, RecoRef }
let scrollToRef = (refe
浏览 9提问于2020-10-08得票数 0
回答已采纳
1回答
使用最基本的代码响应滚动到组件，而不使用and路由器。
javascript、reactjs
我在一个网页中有多个部分。需要滚动到其中一个组件上的按钮点击。ref路由器是过份的，或者没有必要，因为它只需要滚动到页面的一个部分。
试过这个：
// on return function
<Button onClick={() =>
document
.getElementsByClassName("scrollhere")
.scrollIntoView() //error not a function.
浏览 1提问于2021-05-19得票数 1
回答已采纳
3回答
使用window.scrollTo滚动到div的reactjs粘性导航条不起作用
reactjs、react-ref
我有一个导航条函数组件，它通过onclick回调将链接的名称传递给父组件，并进一步传递给主app组件。app组件有一个具有链接名称的对象和相关的参考文件。应用程序组件中的onclick回调根据底层组件传递给它的链接名从对象中获取引用，并调用一个window.scrollTo。当您第一次单击某个链接时，当页面滚动(如果从粘稠的导航栏单击另一个链接)时，window.scrollTo工作，窗口不再滚动，而是返回到(0,0)，然后单击相同的链接即可。
//回调App组件。
manageContent(link){
console.log(this.linksData[link].curren
浏览 1提问于2019-07-25得票数 4
3回答
使用VueJS ()的scrollIntoView组件
javascript、html、vue.js、getelementbyid、vue-component
我试图在vue组件中使用document.getElementById().scrollIntoView()来使用跳转到Div类型的特性。
如果在组件中调用该函数，则该功能可以正常工作。但是，如果我尝试使用ref从父组件调用函数，则元素不会滚动到视图中。
父组件是页，子组件是页中的选项卡。
这是父组件中的子Vue组件 :-
<el-tab-pane label="Solution Details" name="Solution Details" v-loading="loading">
<solu
浏览 3提问于2017-06-17得票数 26
回答已采纳
7回答
不同类型的游戏有哪些不同游戏云方案？
游戏解决方案
作为一名游戏爱好者，从MMORPG到MMO，MOBA再到打卡牌，休闲类游戏，都有涉猎，很好奇这么多不同类型的游戏，风格和架构都不尽相同，游戏云是如何做出相应的方案来应对的呢？
浏览 1086提问于2018-07-06
1回答
onClick不适用于Material-UI工具提示中的弹出器组件
reactjs、material-ui、popper.js
预期的行为是在单击工具提示时转到另一个页面。为了实现这个功能，我为PopperProps对象提供了onClick属性。 下面是我的代码： interface Props extends TooltipProps{}
const CustomTooltip : React.FC<Props> = (props) => {
const { arrow, ...classes } = useStylesBootstrap();
const [arrowRef, setArrowRef] = React.useState<HTMLSpanElement | null
浏览 30提问于2020-04-30得票数 2
回答已采纳
1回答
在React中的大型组件中，我希望单击一个元素并滚动到另一个元素。
javascript、reactjs、dom
在React中，我想单击一个元素，并将页面滚动到另一个元素。
我已经在堆栈溢出上看到了这个问题的答案，但是我不知道如何在一个大型组件中实现它，比如我正在使用的组件。
操作部件埋在下面的组件中，但如下所示。
应该滚动到元素的函数..。
const scrollToRef = (ref) => window.scrollTo(0, this.myRef.current)
在构造函数中创建Ref。
this.myRef = React.createRef()
我想点击的元素将滚动到所需的元素..。
<a onClick={executeScroll}>
我想滚动的元素..。
<
浏览 8提问于2020-03-07得票数 1
回答已采纳
5回答
有没有办法在没有锚点的情况下添加书签或链接到页面的某个部分？
html、hyperlink、anchor、bookmarks
有没有办法在HTML代码中没有锚点的情况下将HTML页面加入书签或链接到HTML页面(我不是该页面的作者)？
我希望当从书签或超链接访问时，即使在目标页面中没有锚标签，页面也要向下滚动到特定部分。
注意:目标页面有一个锚标签"foo“，那么像http:/...hello.html#foo这样的书签不仅会把用户带到hello.html，还会自动向下滚动到页面的一部分，这样锚标签"foo”就会出现在屏幕的顶部。
浏览 60提问于2011-11-02得票数 41
2回答
将可见性集成到web应用和数据库中的基于web的入侵检测
web-application、appsec、ids、hardening
考虑强化现有的、数据库支持的web应用程序的问题，以检测攻击并在可能的情况下阻止它们。
似乎有一种可行的方法可能是建立一个入侵检测系统，它在两个方面具有可观察性：(a)在web服务器级别(例如，观察正在执行的页面、请求URL、请求参数、会话cookie)和(b)在数据库级别(例如，观察正在执行的SQL查询)。我可以想象许多机会来建立一个异常检测器和监控系统，可以检测到许多攻击。例如，如果过去从页面foo.php启动的SQL查询是SELECT查询，而现在您看到了UPDATE或DROP命令，那么这可能是可疑的。如果我看到一个包含分号或嵌套子查询的查询，而且我以前从未从该页面中看到过，这可能是可疑的
浏览 0提问于2014-06-03得票数 1
1回答
WAF后面的外部面向ASE
azure-web-app-service、azure-application-gateway、app-service-environment
我用一个Web应用程序创建了面向外部的ASE。尝试放置启用WAF的应用程序网关。
我已经配置了应用网关子网和面向公众的前端。
为了将WAF与ASE( App )连接起来，我在后端池中设置了App (FQDN)的目标。在映射目标之后，我已经验证了后台池的健康状态。
现在我尝试访问应用程序网关的前端IP和FQDN，我得到了以下错误
“您要查找的资源已被删除，名称已更改，或暂时不可用。”
在没有NSG的情况下采取的行动，也允许NSG在ASE子网中运行
需要你的帮助，我正处在环境设置的中间。
怀疑主机名解析是missig，并且不确定如何克服这个块
浏览 3提问于2017-06-13得票数 1
7回答
单击按钮，滚动页到嵌套的React组件。
javascript、reactjs
我有一个带有几个嵌套组件的React组件。对于页面导航，我在顶部有几个按钮。问题是，当单击某个按钮时，如何将页面滚动到嵌套的react组件，不使用jquery库就可以做到吗？
render() {
return (
<div>
<button onClick={(e) => { console.log('Scrolling to Item 1');}}>Button0</button>
<button onClick={(e) => { console.log('
浏览 7提问于2017-01-17得票数 13
回答已采纳
7回答
如何结合腾讯云开发微信小程序？
api、serverless、html5
目前，微信小程序越来越流行，而且功能越来越强大，在性能方面也越做越好。因为能够原生调用小程序提供的组件和 API ，小程序的开发快捷，使用方便，越来越多的产品会落地到微信小程序上。但传统的微信小程序开发，和普通的H5页面开发或者原生APP开发相比，只是改变了前端部分的开发方式，还是离不开厚重的后台开发。 现在的小程序，在后台服务方面，正在往 serverless 趋势方向发力。小程序提供了云厂商的无服务器函数 SCF，使得小程序无需搭建一个后台服务即可运行。如何结合腾讯云开发微信小程序？
浏览 3743提问于2018-09-28
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
