如何解决滚动到页面上某个组件的“反应”方式是什么?
我想要一个带有链接的标题,该链接可以滚动到页面上的那些部分。
我可以用refs
以某种方式实现吗?也许forwardRef
?
在香草JS中,我可以通过以下方式实现:
onClick=(()=>{
let elm = document.getElementById('experience-head');
elm.scrollIntoView({
behavior: 'smooth',block: 'start',inline: 'nearest',});
})
但是,这是我的应用程序的布局:
return (
<FPWrap>
<Header />
<SlantDivider id="slant-a" color="black" />
<About id="about" />
<SlantDivider color="black" />
<ExperienceHead id="experience-head" />
....
<Footer />
</FPWrap>
);
}
解决方法
参考示例:
const Component = () => {
const myRef = useRef(null);
const executeScroll = () => myRef.current.scrollIntoView({ behavior: 'smooth',block: 'start' });
return (
<FPWrap>
<Header />
<SlantDivider id="slant-a" color="black" />
<About id="about" />
<SlantDivider color="black" />
<ExperienceHead ref={myRef} id="experience-head" />
<button onClick={executeScroll}> Click to scroll </button>
....
<Footer />
</FPWrap>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。