在React中使用querySelector、getElementByClassName修改样式是否合规？

首先明确：直接用getElementByClassName、querySelector这类原生DOM操作修改样式，在React里不是推荐做法。React的核心是数据驱动视图，直接操作DOM会绕开React的状态管理，容易导致状态和视图不一致，引发难以排查的bug。

下面是React原生支持的规范实现方式：

1. 条件切换className（最常用方案） #

你觉得为样式变更创建类不合理？其实这是React社区最推崇的方案之一，它符合CSS模块化思想，也完全契合React的状态驱动逻辑。

举个简单示例：

import './styles.css';

function App() {
  const [isActive, setIsActive] = useState(false);

  return (
    <div 
      className={`box ${isActive ? 'box--active' : ''}`}
      onClick={() => setIsActive(!isActive)}
    >
      点击切换样式
    </div>
  );
}

对应的CSS：

.box {
  padding: 1rem;
  border: 1px solid #ccc;
}

.box--active {
  background-color: #42b983;
  color: white;
}

如果样式状态较多，可通过模板字符串拼接：

const classNames = `box ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`;

2. 内联样式（适合动态计算的样式） #

如果样式值是实时动态计算的（比如随状态变化的尺寸、颜色数值），内联样式是更直接的选择。React的内联样式接受对象格式，属性采用驼峰命名：

function App() {
  const [width, setWidth] = useState(100);

  return (
    <div>
      <div 
        style={{ 
          width: `${width}px`, 
          height: '100px', 
          backgroundColor: '#42b983' 
        }}
      />
      <button onClick={() => setWidth(width + 20)}>加宽</button>
    </div>
  );
}

注意：内联样式优先级高于CSS类，且无法使用伪类、媒体查询这类CSS特性，适合简单的动态数值场景。

3. useRef（仅作为兜底方案） #

useRef不是每次改样式都要用的工具，它只适合必须直接操作DOM元素的场景，比如获取元素尺寸、聚焦输入框，或者某些无法通过状态驱动的DOM操作。如果要用它修改样式，也要尽量结合React状态同步：

function App() {
  const boxRef = useRef(null);
  const [isActive, setIsActive] = useState(false);

  useEffect(() => {
    if (boxRef.current) {
      boxRef.current.style.backgroundColor = isActive ? '#42b983' : '#ccc';
    }
  }, [isActive]);

  return (
    <div ref={boxRef} onClick={() => setIsActive(!isActive)}>
      点击切换背景
    </div>
  );
}

这种方式需谨慎使用，因为直接修改DOM样式会脱离React的状态管控，仅在上述两种方案无法满足需求时再考虑。

总结 #

• 优先使用条件切换className：适合大多数静态样式的动态切换，符合React数据驱动思想，便于CSS维护。
• 动态计算的样式用内联样式：比如随状态变化的尺寸、颜色值。
• 避免直接用getElementByClassName/querySelector操作DOM：会破坏状态与视图的一致性。
• useRef仅作为兜底方案：仅在必须操作DOM元素时使用，且尽量结合React状态同步。

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