在 Next.js 中应避免直接操作 DOM，推荐使用 useState 管理唯一激活按钮的状态：通过一个数字索引（如 0, 1）标识当前激活项，并在点击时更新该状态，再动态绑定 className 实现视觉反馈。
在 next.js 中应避免直接操作 dom，推荐使用 `usestate` 管理唯一激活按钮的状态：通过一个数字索引（如 `0`, `1`）标识当前激活项，并在点击时更新该状态，再动态绑定 `classname` 实现视觉反馈。
在 React 生态（尤其是 Next.js）中，状态驱动 UI 是核心范式。手动调用 document.querySelectorAll() 移除 class 不仅违背 React 的声明式原则，还可能引发服务端渲染（SSR）不一致、水合错误（hydration mismatch）等严重问题。正确的做法是将“哪个按钮处于激活态”这一事实抽象为组件内部状态。
以下是一个清晰、可扩展、符合最佳实践的实现方案：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
✅ 正确做法：用 useState 管理激活索引
import { useState } from 'react';
function HebdoSelector() {
const [activeIndex, setActiveIndex] = useState<number | null>(null);
return (
<div className="flex py-24 bg-hebdo w-full">
<div className="flex flex-col gap-5 justify-center items-center w-full">
<h2>HEBDO</h2>
<div className="flex items-center justify-between gap-2 border flex-grow">
<button
className={`py-1.5 px-2 rounded-[3px] text-orange-white-light bg-[#ffffff40] ${activeIndex === 0 ? 'active' : ''}`}
onClick={() => setActiveIndex(0)}
aria-pressed={activeIndex === 0}
>
<DayItem />
</button>
<button
className={`py-1.5 px-2 rounded-[3px] text-orange-white-light bg-[#ffffff40] ${activeIndex === 1 ? 'active' : ''}`}
onClick={() => setActiveIndex(1)}
aria-pressed={activeIndex === 1}
>
<DayItem />
</button>
</div>
</div>
</div>
);
}
export default HebdoSelector;? 关键要点说明
- 状态单一可信源：activeIndex 是唯一 truth source，所有按钮的样式都由此派生，无需手动清理其他节点。
- 索引优于布尔值：使用 number | null 类型（而非多个布尔 state）天然支持任意数量按钮，便于后续扩展（例如增加周三、周四按钮）。
- 无障碍增强：添加 aria-pressed 属性，使屏幕阅读器能正确识别按钮的切换状态，提升可访问性。
- 无副作用渲染：完全依赖 React 渲染机制，兼容 SSR/SSG，杜绝 useEffect + querySelector 带来的水合风险。
? 进阶建议（可选）
若按钮数量较多或需动态生成，可进一步封装为数组映射：
const days = ['Mon', 'Tue']; // 或从 props / context 获取
return (
<div className="flex items-center justify-between gap-2 border flex-grow">
{days.map((_, idx) => (
<button
key={idx}
className={`py-1.5 px-2 rounded-[3px] text-orange-white-light bg-[#ffffff40] ${activeIndex === idx ? 'active' : ''}`}
onClick={() => setActiveIndex(idx)}
aria-pressed={activeIndex === idx}
>
<DayItem day={idx} />
</button>
))}
</div>
);⚠️ 注意事项
- 切勿在事件处理器中使用 document.querySelector 或 classList.toggle —— 这会绕过 React 的状态同步，导致 UI 与状态不一致；
- 若初始需默认激活某一项，将 useState 初始化为对应索引（如 useState(0)），但注意 null 更语义化地表达“未选择”；
- 确保 .active CSS 类已正确定义（例如高亮背景色、边框或文字加粗），否则视觉变化不可见。
遵循此模式，你不仅能解决当前问题，更能建立起对 React 状态管理的正确认知，为构建健壮的 Next.js 应用打下坚实基础。
