React类组件外引用滚动DOM元素出现undefined问题求助

这个问题我太懂了！你现在遇到的核心问题是DOM渲染时机不匹配：你在组件外部执行document.getElementById('scrollDiv')的时候，React还没完成组件的渲染，这个div根本还没被挂载到页面上，所以自然返回undefined。

直接在滚动事件里每次都调用document.getElementById确实能解决问题，但每次滚动都做DOM查询，性能上多少有点浪费——毕竟DOM查询是相对耗时的操作，滚动事件触发频率又很高。

更优的解决方案：用React的Ref机制 #

React专门提供了Ref来安全地访问组件内的DOM元素，这是官方推荐的方式，既符合React的设计理念，又能避免重复DOM查询。下面给你两种常用的实现方式：

方式1：使用React.createRef()（React 16.3+推荐）

这是类组件中最简洁的写法：

import React from 'react';

class Test extends React.Component{
  // 1. 创建一个Ref实例
  scrollDivRef = React.createRef();

  listenScrollEvent = () => {
    // 3. 通过ref.current访问DOM元素
    const myDiv = this.scrollDivRef.current;
    console.log("获取到的滚动div:", myDiv);
    // 比如获取滚动位置
    if (myDiv) {
      console.log("当前滚动距离:", myDiv.scrollTop);
    }
  };

  render(){
    return (
      // 2. 将Ref绑定到目标div上
      <div ref={this.scrollDivRef} onScroll={this.listenScrollEvent}></div>
    )
  }
}

• 这个Ref只会在组件挂载完成后被赋值，卸载时被置为null，完全不用担心时机问题
• 每次滚动事件触发时，直接访问this.scrollDivRef.current就能拿到DOM元素，不需要重复查询

方式2：回调Ref（兼容旧版本React）

如果你的项目用的是16.3之前的React版本，可以用回调Ref的写法：

import React from 'react';

class Test extends React.Component{
  // 存储DOM元素的变量
  scrollDiv = null;

  // 回调函数，React会在元素挂载/卸载时调用它
  setScrollDivRef = (element) => {
    this.scrollDiv = element;
  };

  listenScrollEvent = () => {
    console.log("获取到的滚动div:", this.scrollDiv);
    if (this.scrollDiv) {
      console.log("当前滚动距离:", this.scrollDiv.scrollTop);
    }
  };

  render(){
    return (
      <div ref={this.setScrollDivRef} onScroll={this.listenScrollEvent}></div>
    )
  }
}

为什么不推荐组件外查询DOM？ #

React组件的渲染流程是：先执行类定义→再调用render方法→最后把虚拟DOM转换成真实DOM挂载到页面。你在组件外部定义的myDiv，在组件初始化阶段就已经执行了，这时候真实DOM还没生成，自然拿不到元素。

而Ref机制是React官方为这类场景设计的，它能精准地在DOM挂载完成后获取元素，完全避开时机问题，同时性能更优。

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