React操作DOM加类时出现Cannot read properties of null (reading 'classList')报错如何解决

错误原因 #

你写的操作DOM的代码直接放在了组件函数体顶层，组件执行渲染流程时，这段代码会先于return语句的DOM渲染执行，此时DOM元素还没有挂载到页面上，所以不管是useRef的current还是getElementById的返回值都是null，调用classList自然会抛出空值读取错误。

修复方案 #

方案1：用useEffect包裹DOM操作（符合React生命周期规则） #

useEffect的回调会在组件DOM挂载完成后执行，此时可以正常获取到DOM元素：

import { useRef, useEffect } from "react";
export default function Modal() {
  const modal = useRef(null);
  // 把DOM操作放到useEffect里
  useEffect(() => {
    modal.current.classList.add("modalShow");
    // 这里用getElementById也能正常拿到元素了
    // const element = document.getElementById("modal");
    // element.classList.add("modalShow");
  }, [])
  return <div id="modal" ref={modal} className="modalContainer "></div>;
}

方案2：用状态控制类名（更符合React声明式写法，推荐） #

不需要直接操作DOM，通过状态变量控制类名的挂载，是React更推荐的写法：

import { useState } from "react";
export default function Modal() {
  // 用状态控制是否显示模态框，可根据业务逻辑修改状态值
  const [showModal, setShowModal] = useState(true);
  return (
    <div 
      id="modal" 
      className={`modalContainer ${showModal ? 'modalShow' : ''}`}
    ></div>
  );
}

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