React不使用state通过JS DOM添加切换active类报错解决方案求助

• document.getElementsByClassName返回的是HTMLCollection类数组对象，没有内置forEach方法，直接调用就触发了截图里的类型错误。
• 你已经把e.target.classList赋值给了active变量，后续写active.classList.add等于重复获取classList属性，属性不存在，加类逻辑本身也跑不通。
• React本身是状态驱动UI的框架，手动操作DOM添加的类会在组件重渲染时被清空，长期用会有各种不可控的样式问题。

方案1：修正原生DOM写法（仅临时测试用，不推荐） #

const ActiveClass = (e) => {
  // 把类数组转成真实数组再遍历
  const prevActive = Array.from(document.getElementsByClassName("Active"));
  prevActive.forEach(el => el.classList.remove("Active"));
  // 直接给当前点击元素加类
  e.target.classList.add("Active");
}

注意：该方案仅适合无重渲染逻辑的静态组件，组件有状态更新触发重渲染时，手动加的Active类会被重置。

方案2：React标准状态驱动写法（推荐，可直接投入生产使用） #

完整可运行组件代码：

import { useState } from 'react';

// 筛选选项配置，后续新增选项直接修改该数组即可
const filterList = [
  { name: 'Today', id: 'today' },
  { name: 'Yesterday', id: 'yesterday' },
  { name: 'This Week', id: 'week' }
];

function FilterOrder() {
  // 用state记录当前激活项的id
  const [activeId, setActiveId] = useState('today');

  return (
    <div className="FilterOrder">
      {filterList.map(item => (
        <div
          key={item.id}
          // 状态匹配时自动添加Active类，完全不需要操作DOM
          className={activeId === item.id ? 'Active' : ''}
          onClick={() => setActiveId(item.id)}
        >
          {item.name}
        </div>
      ))}
    </div>
  );
}

export default FilterOrder;

写法优势 #

• 完全符合React的设计逻辑，状态和UI一一对应，不会出现类名被意外重置的问题
• 后续要新增筛选选项只需要修改filterList数组，不用重复写DOM结构
• 可以直接通过activeId拿到当前选中的筛选值，不需要额外从DOM上读取属性，方便对接后续业务逻辑

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