React JS中如何添加classname？滚动修改导航class报错如何解决？

该报错Cannot read properties of null (reading 'classList')的核心原因是执行document.getElementById("nav")获取导航元素时，页面DOM尚未渲染完成，id为nav的元素还不存在，导致myNav被赋值为null，后续调用null.classList就触发了该报错。
另外可以先自行检查导航元素的id是否拼写错误、大小写和代码中的"nav"不匹配，这也是常见的触发原因。

• 方案1：调整JS代码位置
  把你的整段JS代码放到HTML文件的</body>闭合标签之前，确保所有DOM元素加载完成后再执行JS逻辑，是最简便的解决方案。

• 方案2：把元素获取逻辑移到滚动事件内
  触发滚动事件时页面DOM已经加载完成，不会出现拿不到元素的问题，修改后代码如下：

window.onscroll = function() {
  "use strict";
  var myNav = document.getElementById("nav");
  // 增加非空判断，极端场景下也不会报错
  if (!myNav) return;
  if (document.body.scrollTop >= 150 || document.documentElement.scrollTop >= 150) {
    myNav.classList.add("scroll");
  } else {
    myNav.classList.remove("scroll");
  }
};

• 方案3：用DOMContentLoaded事件包裹逻辑
  通过事件监听确保DOM完全加载完成后再执行初始化逻辑，代码如下：

document.addEventListener("DOMContentLoaded", function() {
  var myNav = document.getElementById("nav");
  window.onscroll = function() {
    "use strict";
    if (document.body.scrollTop >= 150 || document.documentElement.scrollTop >= 150) {
      myNav.classList.add("scroll");
    } else {
      myNav.classList.remove("scroll");
    }
  };
})

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