ReactJS中使用Ref操作DOM元素ClassList出现空值错误的原因？

这个报错的核心原因其实是React组件的生命周期时序问题，咱一步步拆解清楚：

首先，你在render()方法里直接尝试操作this.refCDImg.current.classList，但render()的作用是生成虚拟DOM的描述，这时候组件的真实DOM元素还没被挂载到浏览器的DOM树里呢！所以在render执行的那个瞬间，this.refCDImg.current其实是null——你看到console.log输出看似正常，大概率是浏览器控制台的“动态更新”特性搞的鬼：当你点开控制台里的输出对象时，DOM已经挂载完成，current已经指向了真实元素，但在render执行的当下，它确实是null。

那怎么解决这个问题呢？给你几个靠谱的方案：

方案1：用类组件的componentDidMount生命周期钩子 #

这是类组件里操作真实DOM的标准时机——这个钩子会在组件完全挂载（真实DOM已经插入页面）之后触发，此时ref.current已经能正确指向目标元素：

export class Cd extends Component {
  constructor(props) {
    super(props);
    this.refCDImg = React.createRef();
  }

  componentDidMount() {
    // 这里可以安全地操作DOM
    this.refCDImg.current.classList.add('disk-image-large--waiting');
  }

  render() {
    return(
      // ...你的其他代码
      <i ref={this.refCDImg} className={'d-img-large'} />
      // ...你的其他代码
    )
  }
}

方案2：用React状态管理类名（更推荐） #

React本身是声明式框架，更推荐通过状态来控制元素的类名，而不是直接操作DOM，这样更符合React的设计理念，也能避免一些DOM操作带来的潜在问题：

export class Cd extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cdImgClasses: 'd-img-large'
    };
  }

  componentDidMount() {
    this.setState({
      cdImgClasses: `${this.state.cdImgClasses} disk-image-large--waiting`
    });
  }

  render() {
    return(
      // ...你的其他代码
      <i className={this.state.cdImgClasses} />
      // ...你的其他代码
    )
  }
}

额外提示（函数组件场景） #

如果后续你改成函数组件的话，对应的替代方案是用useEffect钩子，依赖项传空数组就能模拟componentDidMount的效果：

import { useRef, useEffect } from 'react';

function Cd() {
  const refCDImg = useRef(null);

  useEffect(() => {
    refCDImg.current.classList.add('disk-image-large--waiting');
  }, []); // 空数组确保只执行一次

  return(
    // ...你的其他代码
    <i ref={refCDImg} className={'d-img-large'} />
    // ...你的其他代码
  )
}

总结一下：React的render方法只负责描述UI，不要在里面操作真实DOM；所有需要操作真实DOM的逻辑，都要放在DOM已经挂载完成的生命周期钩子中，或者用声明式的状态管理来替代DOM操作。

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