如何滾動到 React 中的功能組件？

Question

我是 Reactjs 的新手。 我有定義了標題的功能組件，現在我希望在用戶單擊標題時實現滾動，用戶應該滾動到下面同一頁面中的適當功能組件

const Page = () => {

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

在上面的代碼中，當用戶點擊關於我們或聯系我們時，應該會發生滾動

有人可以幫我實現滾動嗎？

Answer 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