如何使用react函数组件添加或删除类

Question

我使用的是react typescript。如果我单击任何列表项，我将尝试添加或删除活动类，但代码是，有时不起作用。所以我想以更好的方式更新我的代码。有人能帮我改进更新下面的函数代码吗？

这是我想要更新的功能

const list = document.querySelectorAll('.m-list') as NodeListOf<Element>
function activeLink(e: any) {
list.forEach((item) => item.classList.remove('active'))
e.classList.add('active')
}
list.forEach(item => item.addEventListener('click', (e) => activeLink(item)))

HTML完整代码

export default function MobileNavigation() {
const list = document.querySelectorAll('.m-list') as NodeListOf<Element>
function activeLink(this: any) {
list.forEach((item) => item.classList.remove('active'))
// list.forEach((item) => item.classList.add('active'))
this.classList.add('active')
}
list.forEach(item => item.addEventListener('click', activeLink))

return <div className='mobile-navigation'>
<ul>
<li className='m-list active'>
<a href="#">
<span className='m-icon'><i className="fa-solid fa-house"></i></span>
<span className='m-text'>Home</span>
</a>
</li>
<li className='m-list'>
<a href="#">
<span className='m-icon'><i className="fa-solid fa-shop"></i></span>
<span className='m-text'>Shop</span></a>
</li>
<li className='m-list'>
<a href="#"><span className='m-icon'><i className="fa-solid fa-store"></i></span>
<span className='m-text'>Vendors</span></a>
</li>
<li className='m-list'>
<a href="#"><span className='m-icon'><i className="fa-solid fa-address-card"></i></span>
<span className='m-text'>About us</span></a>
</li>
<li className='m-list'>
<a href="#"><span className='m-icon'><i className="fa-solid fa-headset"></i></span>
<span className='m-text'>Contact Us</span></a>
</li>
<div className="indicator"></div>
</ul>
</div>;
}

Answer 1

您的代码是纯VanillaJS，而不是Typescript或React。试着阅读一些关于Typescript AND React的内容，制作示例项目并尝试-https://medium.com/codex/typescript-and-create-react-app-11bdebcbf763