React数组refs绑定列元素时current属性为null的问题分析

判断条件始终为false，是三个层面的时序/逻辑错位共同导致的：

• 第一次渲染时columnRefs数组本身为空：你是在componentDidMount钩子中才通过循环push创建ref、再通过setState把列元素塞进state的。组件首次执行render时，列元素根本还没被创建，对应数组索引下的ref自然不存在，判断必然不成立。
• Ref的赋值时机晚于render执行阶段：即使你后续setState触发重新渲染，React的执行顺序是：先执行render函数计算虚拟DOM → 把虚拟DOM转换成真实DOM插入页面 → 最后才遍历所有ref，把current属性指向对应的真实DOM节点。也就是说render函数执行的整个过程中，ref的current还处于初始的null状态，你在render里直接读this.columnRefs[item].current，永远拿不到DOM对象。
• 位置计算逻辑存在偏差：就算ref正常拿到了DOM节点，getBoundingClientRect()返回的是元素相对于浏览器视口的坐标值，而你的叠加元素是相对于外层position: relative的容器定位的，直接把视口坐标当left值用，最终位置也会出现偏移。

• 提前创建列对应的ref，不要等组件挂载后再动态生成：可以在类属性初始化阶段就把列ID、对应的ref数组全部准备好，不需要存在state中。
• 把DOM位置计算的动作移到DOM真正挂载完成的时机：也就是componentDidMount钩子里，等所有列DOM都渲染完成、ref的current已经被赋值后，再去读取边界值计算偏移，把计算好的位置存在state中。
• render阶段只负责读取state中存好的位置值渲染叠加元素，绝不要在render执行过程中直接读取ref中的DOM信息。

核心逻辑的代码示例：

export class Grid extends React.Component<GridProps, any> {
  // 提前初始化容器ref、列ID列表、列对应的ref数组
  private containerRef = React.createRef<HTMLDivElement>();
  private columnIds = [0,1,2,3,4,5,6,7];
  private columnRefs = this.columnIds.map(() => React.createRef<HTMLDivElement>());

  state = {
    overlayPositions: [] as { left: number }[]
  }

  // 等所有DOM挂载完成后，再统一计算位置
  public componentDidMount() {
    const containerRect = this.containerRef.current?.getBoundingClientRect();
    if (!containerRect) return;

    // 计算每个列相对于外层容器的偏移量
    const positions = this.columnRefs.map(ref => {
      const colRect = ref.current?.getBoundingClientRect();
      if (!colRect) return { left: 0 };
      return { left: colRect.left - containerRect.left };
    });

    this.setState({ overlayPositions: positions });
  }

  public render() {
    const items = [0, 2, 5];
    return (
      <div 
        ref={this.containerRef} 
        style={{ width: "500px", height: "200px", position: "relative" }}
      >
        {/* 直接用state中存的位置渲染叠加元素 */}
        {items.map(itemIdx => {
          const pos = this.state.overlayPositions[itemIdx];
          if (!pos) return null;
          return (
            <div style={{
              position: "absolute",
              top: 0,
              left: pos.left,
              width: "10px",
              height: "20px",
              backgroundColor: "blue",
              opacity: 0.5
            }} />
          )
        })}
        {/* 直接渲染列元素，绑定提前初始化好的ref */}
        <div style={{ display: "flex" }}>
          {this.columnIds.map((id, idx) => (
            <GridColumn key={id} forwardedRef={this.columnRefs[idx]} />
          ))}
        </div>
      </div>
    )
  }
}

额外注意：如果列的位置会因为窗口大小变化、容器滚动等动态改变，还需要在对应的resize、scroll事件里重新计算位置更新state，保证叠加元素始终对齐列的当前位置。

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