react 组件重渲染时会重新计算并覆盖通过原生 javascript（如 classlist.add）手动添加的 class，导致样式丢失；应统一使用 react 状态驱动 classname 更新，避免混合操作 dom。
react 组件重渲染时会重新计算并覆盖通过原生 javascript（如 classlist.add）手动添加的 class，导致样式丢失；应统一使用 react 状态驱动 classname 更新，避免混合操作 dom。
在 React 开发中，直接操作 DOM 元素的 classList（例如 divElement.classList.add('active')）看似便捷，但与 React 的声明式更新机制存在根本性冲突。React 通过虚拟 DOM 和组件重渲染来同步 UI 状态，每次状态或 props 变化时，组件函数会重新执行，className 属性（包括 clsx 计算结果）也会被完全重新生成并覆盖到真实 DOM 上。这意味着：你用原生 JS 添加的 class 会在下一次渲染中被 React 的 className 值彻底清除——这不是 Bug，而是 React 保证 UI 与状态一致性的必然行为。
✅ 正确做法：将所有 class 控制逻辑交由 React 管理。
推荐使用 useState 或 useEffect 将动态 class 纳入状态流：
import { useState, useEffect, useRef } from 'react';
import clsx from 'clsx';
function ChatInputContainer() {
const [isCommandMode, setIsCommandMode] = useState(false);
const [isFocused, setIsFocused] = useState(false);
const inputRef = useRef<htmldivelement>(null);
// 若需响应外部事件（如快捷键触发命令模式）
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.ctrlKey && e.key === 'Enter') {
setIsCommandMode(true);
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, []);
// 若需监听焦点状态（替代手动 add/remove class）
useEffect(() => {
const el = inputRef.current;
if (!el) return;
const onFocus = () => setIsFocused(true);
const onBlur = () => setIsFocused(false);
el.addEventListener('focusin', onFocus);
el.addEventListener('focusout', onBlur);
return () => {
el.removeEventListener('focusin', onFocus);
el.removeEventListener('focusout', onBlur);
};
}, []);
return (
<div ref="{inputRef}" classname="{clsx(" iscommandmode isfocused class tabindex="{0}"></div>
);
}
export default ChatInputContainer;</htmldivelement>
⚠️ 注意事项：
- 禁止混用：不要在 useEffect 中用 element.classList.add() 后又依赖 className 属性控制同一元素——这会造成状态不一致和难以调试的竞态问题；
- 性能优化：若 class 计算复杂，可用 useMemo 缓存 clsx() 结果；
- 可访问性：手动添加的 class 若用于视觉反馈（如 focus 状态），应优先通过 :focus-visible CSS 或 useEffect + ref 监听原生事件实现，确保符合无障碍标准；
- 第三方库兼容：类似 classnames、clsx 的工具仅负责字符串拼接，不操作 DOM，因此完全安全可靠。
总结：React 的核心原则是“状态驱动视图”。任何脱离状态的 DOM 修改（包括 class 操作）都会在重渲染中失效。将 class 变更建模为组件状态，并通过 className 属性声明式表达，才是健壮、可维护、符合 React 哲学的实践方式。
