React实现点击div移除子元素类并切换active类

要实现你要的效果，核心是用React的状态跟踪当前激活的导航项，再根据状态动态给对应div添加active类。具体步骤和代码如下：

1. 先引入useState钩子来管理激活状态：

import { Link } from 'react-router-dom';
import { useState } from 'react'; // 新增引入

2. 在组件内部初始化状态，默认激活one（和你原代码的初始状态一致）：

function Main() {
  const [activeId, setActiveId] = useState('one'); // 新增状态变量

3. 给每个div绑定点击事件，点击时更新激活状态为当前div的ID；同时根据activeId动态生成类名：

完整修改后的代码：

import { Link } from 'react-router-dom';
import { useState } from 'react';

function Main() {
  const [activeId, setActiveId] = useState('one');

  const handleNavClick = (e, id) => {
    // 如果不需要触发Link的跳转，解开下面这行注释
    // e.preventDefault();
    setActiveId(id);
  };

  return (
    <>
      <div id="nav">
        <Link to="/">
          <div 
            id="one" 
            className={activeId === 'one' ? 'active' : ''}
            onClick={(e) => handleNavClick(e, 'one')}
          ></div>
        </Link>
        <Link to="/">
          <div 
            id="two" 
            className={activeId === 'two' ? 'active' : ''}
            onClick={(e) => handleNavClick(e, 'two')}
          ></div>
        </Link>
        <Link to="/">
          <div 
            id="three" 
            className={activeId === 'three' ? 'active' : ''}
            onClick={(e) => handleNavClick(e, 'three')}
          ></div>
        </Link>
        <Link to="/">
          <div 
            id="four" 
            className={activeId === 'four' ? 'active' : ''}
            onClick={(e) => handleNavClick(e, 'four')}
          ></div>
        </Link>
      </div>
    </>
  );
}

export default Main;

关键说明： #

• 用useState维护的activeId是唯一的状态源，确保每次只有一个导航项会被标记为激活状态。
• 点击div时更新activeId，React会自动重新渲染，移除其他项的active类并给当前项加上。
• 注意JSX里要使用className而非原生的class，这是React的语法要求。

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