ReactJs：特定NavLink激活时为元素添加新CSS类的问题

我明白你遇到的问题了——你的isActive函数能检测到激活状态，但直接操作DOM添加类的方式在React里不太靠谱，甚至会被React的渲染机制覆盖掉。咱们来一步步解决这个问题：

核心问题：直接操作DOM违背React的数据流 #

React是数据驱动视图的框架，它会维护自己的虚拟DOM，当组件的props或state变化时，React会重新渲染真实DOM。你直接用document.querySelector修改类名，绕开了React的数据流，很可能在组件重新渲染时被覆盖，而且还可能重复添加类名（比如多次激活时new-classjs会被加好几次）。

方案一：用React状态管理（推荐） #

这是最符合React设计模式的做法，通过组件的state来控制目标元素的类名：

1. 在组件里添加状态，记录当前是否激活目标NavLink：

class PortfolioMenu extends Component {
  state = {
    isIntroActive: false // 记录"/portfolio"路径是否激活
  };

  // 其他代码...
}

2. 修改isActive函数，通过setState更新状态，而不是直接操作DOM：

isActive= (match, location) => {
  // 更新状态：match存在则表示当前NavLink激活
  this.setState({ isIntroActive: !!match });
  return match; // 别忘了返回match，保证NavLink的activeClassName正常工作
};

3. 在目标ul元素上，根据状态动态拼接类名：

<ul className={`portfolio-menu ${this.state.isIntroActive ? 'new-classjs' : ''}`}>

这样一来，当第一个NavLink激活时，isIntroActive变为true，ul就会自动加上new-classjs类；当激活状态消失时，类名也会自动移除，完全由React的状态驱动，不会出现被覆盖的问题。

方案二：如果非要用DOM操作（不推荐） #

如果你暂时不想改状态，也可以优化DOM操作的写法，避免重复加类和被覆盖的问题：

isActive= (match, location) => {
  const menuElement = document.querySelector('.portfolio-menu');
  if (!menuElement) return match; // 先判断元素是否存在

  if (match) {
    // 使用classList.add，避免重复添加类名
    menuElement.classList.add('new-classjs');
  } else {
    // 激活状态消失时移除类名
    menuElement.classList.remove('new-classjs');
  }
  return match;
};

不过还是强烈推荐方案一，因为直接操作DOM会让代码难以维护，尤其是在复杂组件中，很容易出现渲染不一致的问题。

扩展：如果需要根据不同激活路径添加不同类 #

如果之后想给不同NavLink激活时添加不同的类，可以把状态改成记录当前激活的路径：

state = {
  activePath: ''
};

isActive= (match, location) => {
  if (match) {
    this.setState({ activePath: location.pathname });
  }
  return match;
};

然后在ul的类名里判断：

<ul className={`portfolio-menu ${
  this.state.activePath === '/portfolio' ? 'new-classjs' : 
  this.state.activePath === '/portfolio/casas' ? 'another-class' : ''
}`}>

这样就能灵活处理不同路径的激活状态了。

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