反应;在另一个组件上单击按钮时转到网页上的特定位置
React; go to specific location on web page when button is clicked on another component
我有 2 个不同的组件出现在同一个 URL(页面)上,我想要实现的是,当单击组件 A 上的按钮时,它会将我带到组件 B 的位置在同一页上。所以对于基本的 HTML 这就是我想要实现的;
<a href="#linkToDiv">Scroll me down</a>
<div id="linkToDiv">
Scrolled
</div>
如何使用 React/Next.js
实现此目的
如果您想跳转到您的示例已经工作的组件。
由于您的 React 代码将被验证并写入 DOM,它将以相同的方式工作。
如果你想用动画滚动到组件,你可以使用 vanillajs 的 scrollTo 函数:
https://developer.mozilla.org/de/docs/Web/API/Window/scrollTo
<a href="#" onClick={e => {
e.preventDefault() // do not follow the link
const targetElement = document.getElementById('linkToDiv')
const {top, left} = targetElement.getBoundingClientRect() //get position on screen
window.scrollTo(top + window.scrollY, left + window.scrollX)
/>
通过在同时具有组件 A 和 B 的页面上创建 const scrollRef = useRef()
来解决此问题。将 scrollRef 作为 prop 传递给组件 A,并使用 div
包装组件 B
<div ref={scrollRef}>
<ComponentB/>
</div>
组件A内部,scrollRef作为prop传递;创建了一个函数
const scrollBottom = e => {
e.current.scrollIntoView({
behavior: "smooth"
});
};
并在按钮上使用它作为 onClick。
<button onClick={() => scrollBottom(scrollRef)}>
Scroll Down
</button>
我有 2 个不同的组件出现在同一个 URL(页面)上,我想要实现的是,当单击组件 A 上的按钮时,它会将我带到组件 B 的位置在同一页上。所以对于基本的 HTML 这就是我想要实现的;
<a href="#linkToDiv">Scroll me down</a>
<div id="linkToDiv">
Scrolled
</div>
如何使用 React/Next.js
实现此目的如果您想跳转到您的示例已经工作的组件。
由于您的 React 代码将被验证并写入 DOM,它将以相同的方式工作。
如果你想用动画滚动到组件,你可以使用 vanillajs 的 scrollTo 函数: https://developer.mozilla.org/de/docs/Web/API/Window/scrollTo
<a href="#" onClick={e => {
e.preventDefault() // do not follow the link
const targetElement = document.getElementById('linkToDiv')
const {top, left} = targetElement.getBoundingClientRect() //get position on screen
window.scrollTo(top + window.scrollY, left + window.scrollX)
/>
通过在同时具有组件 A 和 B 的页面上创建 const scrollRef = useRef()
来解决此问题。将 scrollRef 作为 prop 传递给组件 A,并使用 div
<div ref={scrollRef}>
<ComponentB/>
</div>
组件A内部,scrollRef作为prop传递;创建了一个函数
const scrollBottom = e => {
e.current.scrollIntoView({
behavior: "smooth"
});
};
并在按钮上使用它作为 onClick。
<button onClick={() => scrollBottom(scrollRef)}>
Scroll Down
</button>