我实现javascript错误了吗

Question

所以我正在做这个导航栏，它会根据用户当前所在的部分突出显示一个按钮，无论何时我重新保存文件，甚至不更改任何内容，它都会正常工作，当部分更改时，单击或滚动时会用颜色突出显示。

当它工作时，只需要再次对页面充电就可以停止工作，我实现javascript错了吗？

import React from "react";
import FrontPage from './Routes/FrontPage'
import Products from './Routes/Products'
import Clients from './Routes/Clients'
import Contact from './Routes/Contact'
import {BsLinkedin} from 'react-icons/bs'
import {GrInstagram} from 'react-icons/gr'


function App() {
const sections = document.querySelectorAll("section");
const navLi = document.querySelectorAll("nav .container ul li");
window.addEventListener("scroll", () => {
let current = "";
sections.forEach((section) => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (window.pageYOffset >= sectionTop - sectionHeight / 3) {
current = section.getAttribute("id");
}
});
navLi.forEach((li) => {
li.classList.remove("active");
if (li.classList.contains(current)) {
li.classList.add("active");
}
});
});
return (
<>
<nav>
<div className="container">
<ul>
<li><img src='https://diagnosemlpdf.s3.us-east-2.amazonaws.com/landing/static+source/logos/myfutureai_blanco_logo.png' style={{width:"80%",  padding:"0" , margin:"0"}}/></li>
<li class="Inicio active"><a href="#Inicio">Inicio</a></li>
<li class="Productos"><a href="#Productos">Productos</a></li>
<li class="Clientes"><a href="#Clientes">Clientes</a></li>
<li class="Contacto"><a href="#Contacto">Contacto</a></li>
<li style={{"position":"relative", "top":"2vw"}}><a href='https://www.linkedin.com/company/myfutureai/'><BsLinkedin/></a></li>
<div className='aristas'>
<li><a href='https://www.instagram.com/myfuture_ai/'><GrInstagram/></a></li>
<li><a href='https://twitter.com/myfuture_ai'><img style={{"width": "100%", "margin":"0", "padding":"0"}} src='/twitter.png'/></a></li>
</div> 
</ul>
</div>
</nav>

<section id="Inicio">
<FrontPage/>
</section><section id="Productos">
<Products/>
</section><section id="Clientes">
<Clients/>
</section><section id="Contacto">
<Contact/>
</section>
</>
);
}
export default App;

CSS__

/* _____NAVBAR CSS_______ */
nav {
width: 10vw;
height:100vh;
position: fixed;
top: 0;
background-color: white;
z-index: 1000;
}
.container{
display:flex;
flex-direction:column;
}
nav .container {
width: 10vw;
height:100vh;
margin: 0 auto;
text-align: center;
display: flex;
}
nav .container ul  {
width:100%;
height: 100vh;
background-color: #000040;
display: flex;
flex-direction: column;
justify-content: space-around;
}
nav .container ul li {
display: inline-block;
}
nav .container ul li a {
display: inline-block;
text-decoration: none;
color: white;
font-size: 1.5rem;
text-transform: uppercase;
}
nav .container ul li.active {
background-color: #5e17eb;
border-radius: 10px;
transition: 0.3s ease background-color;
}
nav .container ul li.active a {
color: rgb(255, 255, 255);
}

Answer 1

我带着答案回来了。。。尽管javascript逻辑还可以，但在react js中解决这个问题的最简单方法是使用react ROUTER V5(特别是"react ROUTER dom"："^5.2.0"(---你会遇到v6---它是对同一页面react ROUTIER HASHLINK链接部分的补充。这要容易得多，样式在CSS文件中，下面是代码：

将哈希代码链接到节的id位于每个组件的文件中

import React from "react";
import FrontPage from './Routes/FrontPage'
import Products from './Routes/Products'
import Clients from './Routes/Clients'
import Contact from './Routes/Contact'
import { NavHashLink as Link } from "react-router-hash-link";
function App() {



return (
<><nav>
<Link  to='#home' smooth>Inicio</Link>
<Link  to='#about' smooth>Productos</Link>
<Link  to='#clients' smooth>Clientes</Link>
<Link  to='#contact' smooth>Contacto</Link>
</nav>
<section>
<FrontPage />
</section>
<section>
<Products />
</section>
<section>
<Clients />
</section>
<Contact />
</>
)
}

export default App;

在css部分中，haslink可以使用"；a"；作为参考。CSS

a{
color: white;
text-decoration: none;
font-size: 1.5rem;
margin-left: 15px;


}
a.active {
width: 90%;
color:#5e17eb;
border-right: 4px solid white;
transition:400ms ease-in ;
}