如何滚动到 React 中的功能组件？答案

【问题标题】：How to scroll to a functional component in React?如何滚动到 React 中的功能组件？
【发布时间】：2020-08-08 16:01:06
【问题描述】：

我是 Reactjs 的新手。我有定义了标题的功能组件，现在我希望在用户单击标题时实现滚动，用户应该滚动到下面同一页面中的适当功能组件

const Page = () => {

  return (
    <div>
         <div>
            About Us
        </div>
        <div>
            Contact Us
        </div>
        <AboutUs/>
        <ContactUs/>
   </div>
  );
};

在上面的代码中，当用户点击关于我们或联系我们时应该会发生滚动

有人可以帮我实现滚动吗？

【问题讨论】：

这能回答你的问题吗？ How to scroll to an element?

标签： reactjs react-native scroll jsx

【解决方案1】：

这里可以使用相同的旧 HTML 技术。将“关于”或“联系我们”部分的链接指向该特定部分的包装器元素的 ID。

const SomeComponent = () => {
    return (
        <div>
            // content...
            <a href="#about">About</a>
        </div>
    )
}

const About = () => {
    return (
        <div id='about'>
            // content...
        </div>
    )
}

您可以使用路由来使用 SPA 中的多个页面功能。查看react-router-dom

【讨论】：