React中如何解决"Uncaught TypeError: cannot read properties of null (reading 'classList')"？

这个错误的核心是你的代码在操作导航栏元素时，该元素还没被浏览器加载到DOM里，或者元素选择器压根没匹配到目标元素，导致拿到的是null，自然没法调用classList方法。下面是具体排查和解决办法：

1. 确保DOM加载完再执行JS #

• 把滚动监听代码套进DOMContentLoaded事件回调里，等浏览器解析完所有HTML元素再运行：

document.addEventListener('DOMContentLoaded', function() {
  const navbar = document.getElementById('your-navbar-id'); // 替换成你实际的导航栏选择器
  let lastScrollTop = 0;

  window.addEventListener('scroll', function() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    if (scrollTop > lastScrollTop) {
      navbar.classList.add('hidden'); // 向下滚动时隐藏导航栏
    } else {
      navbar.classList.remove('hidden'); // 向上滚动时显示导航栏
    }
    lastScrollTop = scrollTop;
  });
});

• 或者直接把<script>标签放在</body>闭合标签前，浏览器会先加载完所有DOM元素再执行JS：

<body>
  <!-- 页面所有内容 -->
  <script>
    // 你的滚动监听代码写在这
  </script>
</body>

2. 检查元素选择器是否正确 #

• 确认你用的getElementById、querySelector这类方法里的选择器，和HTML中导航栏的id/类名完全匹配，别写错大小写或拼写。
• 可以直接在浏览器控制台敲document.getElementById('your-navbar-id')，如果返回null，说明选择器肯定不对。

3. 处理动态生成的导航栏 #

如果导航栏是通过JS动态生成的（比如框架渲染、AJAX加载），得等元素插入DOM后再绑定滚动事件：

• 原生JS动态创建的话，就在元素appendChild之后再初始化监听；
• 用React/Vue这类框架的话，就在组件的mounted（Vue）或useEffect（React，依赖项传空数组）钩子里面加滚动监听。

4. 加个空值判断兜底 #

怕偶尔出现加载时序问题？在操作元素前先判断元素是否存在：

const navbar = document.getElementById('your-navbar-id');
if (!navbar) return; // 元素不存在直接退出，避免报错

// 后面正常写滚动监听逻辑

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