如何在React.js中为含菜单的链接添加active类切换功能？

下面是原生JavaScript实现的代码，可以直接使用：

const AllLinksNavbar = Array.from(
    document.querySelectorAll(".has-menu")
)

AllLinksNavbar.forEach(element => {
    element.addEventListener('click', (e) => {
        e.preventDefault();
        element.classList.toggle('active')
    });
})

代码说明： #

• 首先通过document.querySelectorAll(".has-menu")选中所有带有.has-menu类的链接元素，并用Array.from()把它转换成数组，方便后续遍历操作
• 遍历每个选中的元素，给它们绑定点击事件监听
• 点击时调用e.preventDefault()阻止链接的默认跳转行为（避免页面刷新或跳转）
• 最后用classList.toggle('active')切换当前元素的active类——元素有这个类就移除，没有就添加，实现点击切换的效果

内容的提问来源于stack exchange，提问作者Anwar Ramadan