React中createRef的current为null引发TypeError问题求助

错误原因 #

你遇到的Uncaught TypeError: Cannot read properties of null (reading 'style')，本质是在DOM元素还没挂载到页面上，或者ref没正确绑定到目标元素时，就尝试访问ref.current的style属性。

核心解决步骤 #

1. 正确初始化并绑定ref #

在类组件里，必须把创建好的ref通过ref属性绑定到目标DOM元素上，否则ref.current永远是null。

示例代码：

import React from 'react';

class Navbar extends React.Component {
  // 初始化ref：用类字段直接声明，无需手动在constructor里创建
  navRef = React.createRef();
  state = {
    isNavVisible: false
  };

  // 箭头函数自动绑定this，不用手动bind
  toggleNav = () => {
    this.setState(prevState => ({
      isNavVisible: !prevState.isNavVisible
    }));
  };

  render() {
    return (
      <div className="navbar">
        <button onClick={this.toggleNav}>切换导航</button>
        {/* 关键：把ref绑定到目标nav元素上 */}
        <nav ref={this.navRef}>
          <a href="/">首页</a>
          <a href="/about">关于</a>
        </nav>
      </div>
    );
  }
}

2. 访问ref.current前必须做空值检查 #

即使绑定了ref，也可能存在DOM元素被条件渲染移除的情况，所以每次访问前都要先判断ref.current是否存在：

toggleNav = () => {
  this.setState(prevState => ({
    isNavVisible: !prevState.isNavVisible
  }), () => {
    // setState是异步的，在回调里操作DOM能确保状态已更新
    if (this.navRef.current) {
      this.navRef.current.style.display = this.state.isNavVisible ? 'block' : 'none';
    }
  });
};

3. 更推荐的React写法：用状态控制样式（而非直接操作DOM） #

React的设计理念是数据驱动DOM，直接操作style属于原生DOM操作，不是最优解。你可以用状态控制className，配合CSS实现显示/隐藏：

/* 配套CSS */
.nav-hidden {
  display: none;
}
.nav-visible {
  display: block;
}

// 组件代码
render() {
  const navClassName = this.state.isNavVisible ? 'nav-visible' : 'nav-hidden';
  return (
    <div className="navbar">
      <button onClick={this.toggleNav}>切换导航</button>
      <nav className={navClassName}>
        <a href="/">首页</a>
        <a href="/about">关于</a>
      </nav>
    </div>
  );
}

这种写法不需要用到ref，完全用状态控制DOM，既符合React的设计思想，也避免了ref相关的报错。

常见坑点 #

• 不要在constructor、render函数里直接访问ref.current：此时DOM还没挂载，ref.current一定是null。
• 普通函数写法需手动绑定this：如果不用箭头函数写事件处理方法，必须在constructor里执行this.toggleNav = this.toggleNav.bind(this)，否则this指向错误，无法访问this.navRef。
• 条件渲染的元素：如果nav元素是通过{condition && <nav ref={this.navRef}>...</nav>}渲染的，当condition为false时，ref.current会变成null，访问前必须做空值检查。

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