反应;在另一个组件上单击按钮时转到网页上的特定位置

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>