我尝试在导航栏中使用反应滚动,以便在单击任何导航元素时能够滚动到特定组件。
我一直在尝试遵循代码,但我似乎无法完全理解它。我在这里找到了一个很好的答案如何在单击导航栏链接时滚动到特定的目标组件
但我对此感到有点困惑。下面是我自己的代码,我希望将其保留为函数而不是将其更改为类:
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 …Run Code Online (Sandbox Code Playgroud)