React Scroll - 在 NavBar 中使用 React Scroll to 滚动到特定组件

Question

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

我一直在尝试遵循代码，但我似乎无法完全理解它。我在这里找到了一个很好的答案

但我对此有点困惑。下面是我自己的代码，我希望将其保留为一个函数，而不是将其更改为 class:

    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

React Scroll - 在 NavBar 中使用 React Scroll to 滚动到特定组件

React Scroll - Using React Scroll to in NavBar to scroll to specific component

scroll

reactjs

react-infinite-scroll-component

react-scroll