React.createRef() current始终为null的问题排查与解决求助

你猜的完全正确——在render()方法里直接访问refs的current就是问题根源。render()的作用是生成虚拟DOM，此时真实DOM节点还没被挂载到页面上，refs自然无法获取到对应的元素，所以current始终为null。

要获取DOM的坐标信息并完成位置计算，必须等组件挂载完成（真实DOM渲染到页面）后再执行。针对你的类组件，具体修正步骤如下：

1. 用状态存储计算结果 #

首先在组件的state里保存需要动态计算的类名和样式，这样当计算完成后更新状态，就能触发组件重新渲染，使用最新的计算值。

2. 移走render里的计算逻辑 #

把原本写在render()里的位置计算逻辑，移到组件挂载后的生命周期方法中，同时监听窗口大小变化，确保窗口 resize 时能重新计算位置。

修改后的完整代码 #

import React, { Component } from 'react';

// 假设你已经定义了InfoPaneArrowProps接口
interface InfoPaneArrowProps {
  children: React.ReactNode;
  // 其他props定义...
}

// 新增状态类型定义
interface InfoPaneArrowState {
  outerClass: string;
  innerClass: string;
  arrowClass: string;
  arrowStyle: React.CSSProperties;
}

export class InfoPaneArrow extends Component<InfoPaneArrowProps, InfoPaneArrowState> {
  infoPaneRef: React.RefObject<HTMLDivElement>;
  positionRef: React.RefObject<HTMLDivElement>;

  constructor(props: InfoPaneArrowProps) {
    super(props);
    this.positionRef = React.createRef();
    this.infoPaneRef = React.createRef();
    
    // 初始化状态
    this.state = {
      outerClass: '',
      innerClass: '',
      arrowClass: '',
      arrowStyle: {}
    };

    // 绑定事件处理函数
    this.calculatePositions = this.calculatePositions.bind(this);
    this.handleResize = this.handleResize.bind(this);
  }

  componentDidMount() {
    // 组件挂载完成后首次计算位置
    this.calculatePositions();
    // 监听窗口resize事件，重新计算位置
    window.addEventListener('resize', this.handleResize);
  }

  componentDidUpdate(prevProps: InfoPaneArrowProps) {
    // 当依赖的props变化时，重新计算位置（这里以children为例，可根据实际需求调整）
    if (prevProps.children !== this.props.children) {
      this.calculatePositions();
    }
  }

  componentWillUnmount() {
    // 组件卸载时移除监听，避免内存泄漏
    window.removeEventListener('resize', this.handleResize);
  }

  calculatePositions() {
    const markerBox = this.positionRef.current?.getBoundingClientRect();
    const paneBox = this.infoPaneRef.current?.getBoundingClientRect();

    // 这里写入你的位置计算逻辑，生成对应的类名和样式
    const outerClass = markerBox && paneBox ? /* 你的计算逻辑 */ '' : '';
    const innerClass = markerBox && paneBox ? /* 你的计算逻辑 */ '' : '';
    const arrowClass = markerBox && paneBox ? /* 你的计算逻辑 */ '' : '';
    const arrowStyle = markerBox && paneBox ? /* 你的计算逻辑 */ {} : {};

    // 更新状态，触发重新渲染
    this.setState({
      outerClass,
      innerClass,
      arrowClass,
      arrowStyle
    });
  }

  handleResize() {
    // 窗口大小变化时重新计算位置
    this.calculatePositions();
  }

  render() {
    const { outerClass, innerClass, arrowClass, arrowStyle } = this.state;

    return (
      <div
        className={outerClass}
        ref={this.positionRef}
      >
        <div
          className={innerClass}
          ref={this.infoPaneRef}
        >
          {this.props.children}
          <div
            className={arrowClass}
            style={arrowStyle}
          />
        </div>
      </div>
    );
  }
}

额外注意事项 #

• 记得给InfoPaneArrowProps和InfoPaneArrowState补充完整的类型定义，符合你的业务需求。
• 在calculatePositions中保留空值判断（markerBox && paneBox），避免DOM节点意外未挂载时出现报错。
• 如果位置计算依赖其他props，要在componentDidUpdate中对比前后props的变化，只在必要时重新计算，避免不必要的性能消耗。

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