React Scroll - 在导航栏中使用 React Scroll to 滚动到特定组件

Question

我尝试在导航栏中使用反应滚动，以便在单击任何导航元素时能够滚动到特定组件。

我一直在尝试遵循代码，但我似乎无法完全理解它。我在这里找到了一个很好的答案如何在单击导航栏链接时滚动到特定的目标组件

但我对此感到有点困惑。下面是我自己的代码，我希望将其保留为函数而不是将其更改为类：

    import React, { useState } from "react";
import "../Css/NavBar.css";
import Openclose from "./Openclose";
import Scroll from "react-scroll";
import { Link } from "react-scroll";

export default function NavBar() {
  const [isOpen, setIsOpen] = useState(false);

  const renderItems = () => {
    if (!isOpen) {
      return null;
    }
    return (
      <nav className="sidebar">
        <Scroll.ScrollLink
          to="/aboutme"
          spy={true}
          smooth={true}
          duration={500}
        >
          <Link to="/aboutme">About Me </Link>
        </Scroll.ScrollLink> // I'm just playing around with trying to make one work first.
        <li className="sidebar-link">About Me</li>
        <li className="sidebar-link">Projects</li>
        <li className="sidebar-link">Blog Articles</li>
        <li className="sidebar-link">Download CV</li>
        <li className="sidebar-link">Contact Me</li>
      </nav>
    );
  };

  const toggleSidebar = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className="sidebar-container">
      <br></br>
      <Openclose isOpen={isOpen} handleClick={toggleSidebar} />
      {renderItems()} <div className="sidebar-icon"></div>
    </div>
  );
}

一旦我转到 MainWebsite 组件，导航栏与其他组件一起位于其中。转到“关于我”组件并将其包装在“元素”标签中，正如我复制的答案所建议的那样。这不起作用。

我只是收到一条警告错误说

index.js:1 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    in Unknown (at NavBar.js:16)
    in nav (at NavBar.js:15)
    in div (at NavBar.js:38)
    in NavBar (at MainWebsite.js:12)
    in div (at MainWebsite.js:11)
    in MainWebsite (at App.js:17)
    in div (at App.js:20)
    in div (at App.js:14)
    in App (at src/index.js:7)

这是我的关于我

import React from "react";
import { Element } from "react-scroll";

export default function AboutMe() {
  return (
    <React.Fragment>
      <Element id="/aboutme" name="aboutme">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas leo
          tortor, elementum vel tempus vel, luctus at elit. Maecenas ac mattis
          urna. Praesent a elementum ipsum. Praesent laoreet molestie tincidunt.
          Donec ullamcorper, eros quis porta dapibus, tellus mi gravida est,
          sagittis posuere velit nulla vitae massa. Suspendisse consectetur,
          dolor sit amet scelerisque cursus, dolor neque sodales ex, vitae
          facilisis ante lectus non turpis. Duis mattis porttitor lectus.
          Aliquam ac pharetra justo. Fusce elementum velit sed mauris
          scelerisque pretium at sit amet odio.
        </p>
        
      </Element>
    </React.Fragment>
  );
}

那么，我是否只是没有在 NavBar 组件中正确编写一些内容，以便单击后能够滚动到其他组件？

第二次使用这个论坛，所以任何有关减少/创建更好问题的建议也将受到赞赏！我花了很长时间试图自己寻找答案等，但我迷路了。

Answer 1

这是一个基本用法：

import { Link } from "react-scroll";


// somewhere in your markup
<Link to="test1" spy={true} smooth={true} offset={50} duration={500}>Test</Link>

// somewhere else in your markup. This is where it will scroll to.
<div id="test1">...</div>

文档中的更多详细信息：https ://www.npmjs.com/package/react-scroll