React Scroll - использование React Scroll to в NavBar для прокрутки до указанного компонента c

Question

Я пытаюсь использовать прокрутку реакции на моей панели навигации, чтобы иметь возможность прокручивать до определенного c Компонента при нажатии любого из элементов навигации.

Я пытался следовать коду , но я не могу полностью это понять. Я нашел здесь хороший ответ. Как перейти к определенному c целевому компоненту при нажатии на ссылку Navbar

Но меня это немного смущает. Мой собственный код ниже, я бы хотел сохранить его как функцию, а не изменять его на класс:

    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>
  );
}

Как только я затем go в компонент MainWebsite, где NavBar находится с другими компонентами. Go в компонент «Обо мне» и оберните его в теге 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, чтобы иметь возможность прокручивать к другим компонентам после щелчка?

Второй раз использование этого форума, так что любые советы по сокращению / созданию лучшего вопроса также приветствуются! Я потратил много времени, пытаясь найти ответы и c сам, но заблудился.

Answer 1

Вот пример использования c:

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