'React'滚动到页面上某个组件的方法是什么？

Question

我想要一个带有链接的页眉，可以滚动到页面上的这些部分。

我可以用 refs 以某种方式实现吗？也许 forwardRef?

在 vanilla 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>
    );
}

Answer 1

参考示例：

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>
  );
};

'React'滚动到页面上某个组件的方法是什么？

What is the 'React' way to scroll to a certain Component on the page?

reactjs

react-ref