0

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

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

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

    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 组件，其中 NavBar 与其他组件坐在一起。转到 About Me 组件并将其包装在 Element 标记中，正如我复制的答案所暗示的那样。它不起作用。

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

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 组件中正确编写某些内容，以便能够在单击后滚动到其他组件吗？

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

4

1 回答 1

5

这是一个基本用法：

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

于 2020-07-17T04:53:10.777 回答