React中点击导航项切换Active类并清除其他项激活状态

这个问题很常见——你现在把激活状态navigation放在每个NavItem组件内部，导致每个导航项各自为政，点击新项时旧项根本不知道要取消自己的激活状态。要搞定这个，我们得把激活状态的控制权上移到父组件Navigation，让它统一管理哪个项是当前激活的，再把状态传递给子组件。

具体修改步骤： #

1. 把状态移到父组件：在Navigation里添加activeItem状态，用来记录当前激活的导航路径（比如'galleries'）。
2. 父组件添加点击处理方法：写一个方法，点击导航项时更新activeItem为当前项的路径。
3. 改造NavItem为受控组件：让它不再自己管理状态，而是接收父组件传过来的isActive（是否激活）和onClick（点击回调）属性。
4. 根据isActive设置类名：在NavItem里根据父组件传的isActive来决定是否添加active类。

修改后的完整代码： #

class NavItem extends Component {
  render() {
    // 接收父组件传递的属性
    const { href, text, isActive, onClick } = this.props;
    return (
      <li>
        <Link 
          to={href} 
          className={isActive ? 'active' : null} 
          onClick={onClick}
        >
          {text}
        </Link>
      </li>
    )
  }
}

class Navigation extends Component {
  constructor(props) {
    super(props);
    // 父组件统一管理激活状态，默认可设置第一个项为激活，也可设为空
    this.state = {
      activeItem: 'galleries'
    };
  }

  // 处理导航项点击，更新激活状态
  handleItemClick = (item) => {
    this.setState({
      activeItem: item
    });
  };

  render() {
    const { activeItem } = this.state;
    return (
      <nav>
        <ul>
          <NavItem 
            href='galleries' 
            text='Galleries' 
            isActive={activeItem === 'galleries'}
            onClick={() => this.handleItemClick('galleries')}
          />
          <NavItem 
            href='archive' 
            text='Archive' 
            isActive={activeItem === 'archive'}
            onClick={() => this.handleItemClick('archive')}
          />
          <NavItem 
            href='news' 
            text='News' 
            isActive={activeItem === 'news'}
            onClick={() => this.handleItemClick('news')}
          />
          <NavItem 
            href='about' 
            text='About' 
            isActive={activeItem === 'about'}
            onClick={() => this.handleItemClick('about')}
          />
          <NavItem 
            href='contact' 
            text='Contact' 
            isActive={activeItem === 'contact'}
            onClick={() => this.handleItemClick('contact')}
          />
          <NavItem 
            href='map' 
            text='Map' 
            isActive={activeItem === 'map'}
            onClick={() => this.handleItemClick('map')}
          />
        </ul>
      </nav>
    )
  }
}

额外优化建议： #

如果你的项目用了React Router，其实可以利用useLocation钩子（函数组件）或者withRouter高阶组件来自动获取当前路由，不用手动点击更新状态——这样用户直接输入URL跳转时，对应的导航项也能自动激活，更贴合路由的实际变化逻辑。不过上面的基础写法已经能解决你当前的核心问题啦。

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