React中useRef钩子操作DOM设置背景色失效问题

问题根源 #

1. 未访问useRef的current属性：useRef返回的是一个包装对象，实际DOM元素存储在current属性中，直接使用cssNav.style会因为找不到DOM元素而失效。
2. 未监听滚动事件：原代码的useEffect依赖为空数组，仅在组件挂载时执行一次，无法响应后续的滚动操作。

修正后的代码 #

import { useRef, useEffect } from 'react';

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

  useEffect(() => {
    const handleScroll = () => {
      // 先判断current是否存在，避免null报错
      if (cssNav.current) {
        cssNav.current.style.backgroundColor = window.scrollY > 0 ? 'white' : '';
      }
    };

    // 监听window滚动事件
    window.addEventListener('scroll', handleScroll);

    // 组件卸载时移除监听，防止内存泄漏
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div ref={cssNav} style={{ minHeight: '100vh', transition: 'background-color 0.3s' }}>
      滚动页面即可看到导航栏背景变化
    </div>
  );
}

export default YourComponent;

关键说明 #

• 始终通过ref.current访问DOM元素，并且添加非空判断，避免组件初始化阶段current为null引发错误。
• 必须监听scroll事件，才能在用户滚动页面时触发背景色更新逻辑。
• 组件卸载时移除事件监听，这是React中处理全局事件的标准做法，防止内存泄漏。

内容的提问来源于stack exchange，提问作者Rave On Time