无法在反应中读取 null 的属性（读取“classList”）答案

【问题标题】：Cannot read properties of null (reading 'classList') in react无法在反应中读取 null 的属性（读取“classList”）
【发布时间】：2021-11-08 13:16:37
【问题描述】：

我尝试了很多方法来将类添加到 div：

const modal = useRef(null);
modal.current.classList.add("modalShow");

const element = document.getElementById("modal");
element.classList.add("modalShow")

但我总是会遇到这样的错误Cannot read properties of null (reading 'classList') .我该如何解决？

这是我的实时代码：

Live code

import { useRef } from "react";
export default function Modal() {
  const modal = useRef(null);
  modal.current.classList.add("modalShow");
  /*const element = document.getElementById("modal");
  element.classList.add("modalShow");*/
  return <div id="modal" ref={modal} className="modalContainer "></div>;
}

【问题讨论】：

标签： reactjs

【解决方案1】：

因为您试图在渲染并附加到引用之前将类设置为元素。

试试这个：

useEffect(()=>{
   modal.current.classList.add("modalShow");
},[]);

这将确保元素被渲染并且 modal.current 引用该元素，而不是 null。

【讨论】：

【解决方案2】：

在第一次渲染循环中，模态可能为空：


if (modal.current) {
  modal.current.classList.add("modalShow");
}

【讨论】：

【解决方案3】：

只需执行可选链接即可防止此错误：

modal.current?.classList?.add("modalShow");

【讨论】：