React中为何无法使用ref.current.classList添加类名？

你的代码无法生效的核心原因是DOM挂载时机不匹配：

• 组件顶层代码会在渲染阶段执行，此时<div ref={ref}>还没被挂载到页面，ref.current的值是null，调用ref.current.classList.add自然会报错或无效果。
• 而document.querySelector('.blah')能生效，大概率是你在DOM已经挂载完成的时机（比如用户点击事件、异步回调）执行的，此时元素已经存在于页面中。

正确实现方式 #

方式1：使用useEffect确保DOM挂载后操作

useEffect的回调会在组件挂载完成后执行，此时ref.current已经指向真实DOM元素：

import { useRef, useEffect } from 'react';

function YourComponent() {
  const ref = useRef();  

  useEffect(() => {
    ref.current.classList.add('blah-blah');
  }, []); // 空依赖数组：仅在组件挂载后执行一次

  return <div ref={ref} className='blah'></div>;
}

方式2：用状态管理类名（React推荐范式）

React更推荐通过状态控制类名，避免直接操作DOM，这样能保证状态和DOM的一致性：

import { useState } from 'react';

function YourComponent() {
  const [isBlahBlahAdded, setIsBlahBlahAdded] = useState(false);

  // 示例：点击元素时添加类名
  const handleToggleClass = () => {
    setIsBlahBlahAdded(true);
  };

  return (
    <div 
      className={`blah ${isBlahBlahAdded ? 'blah-blah' : ''}`}
      onClick={handleToggleClass}
    ></div>
  );
}

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