在 onClick 方法中调用 React 副作用。有没有更好的实现方式？

Question

我有一个导航面板，其中包含指向 React 应用程序内不同页面的链接。我想突出显示当前的导航链接。我可以通过向活动导航链接添加一个类来实现这一点。我的实现如下：

import { Link } from "react-router-dom";

function Nav() {

    const highlight = (e) => {
        // Remove .nav-select class from all nav items
        let eles = document.querySelectorAll(".nav-select");
        eles.forEach.call(eles, (ele) => {
            ele.classList.remove('nav-select');
        })
        // Add .nav-select to currently clicked nav item
        e.target.className = e.target.className + " nav-select"
    }

    return (
        <nav className="main-nav">
            <ul>
                <li onClick={highlight}>
                    <Link to="/" >Home</Link>
                </li>
                <li onClick={highlight}>
                    <Link to="/blog" >Blog</Link>
                </li>
                <li onClick={highlight}>
                    <Link to="/clock" >Clock</Link>
                </li>
                <li onClick={highlight}>
                    <Link to="/video" >Video</Link>
                </li>
                <li onClick={highlight}>
                    <Link to="/goals" >Goals</Link>
                </li>
            </ul>
        </nav>
    );
};

export default Nav;

相关造型：

.main-nav .nav-select {
  border: 1px solid red;
  padding: 2px
}

这给了我预期的结果。

根据我的理解，调用 document 及其修改是一种副作用，在

useEffect()

钩子中处理副作用是一种很好的做法。这只是一种好的做法，还是如果不遵守可能会导致问题的规则？ 是否有更好的实施或方法来改进我的实施，以达到我的预期结果？

Answer 1

使用

NavLink

代替

Link

，并使用

isActive

道具来控制班级：

<li>
  <NavLink to="/" 
    style={({ isActive }) => 
      className={({ isActive }) =>
        isActive ? 'nav-select' : undefined
      } 
    }>Home
  </NavLink>
</li>