React使用ref获取Skills组件位置时报getBoundingClientRect为null错误求助

错误原因 #

• 你在Skills组件的顶层逻辑中直接调用ref.current.getBoundingClientRect()，此时组件尚未完成挂载渲染，绑定DOM节点的ref还未被赋值，ref.current为null，调用属性直接抛出类型错误。
• 你提前将topPos定义为固定常量，若页面后续有动态内容加载导致Skills组件位置偏移，这个缓存的位置值会失效，导致滚动判断逻辑不准。
• 原滚动触发判断逻辑写反，无法正确识别元素进入视口的时机。

修复方案 #

调整逻辑，将获取元素位置的操作放到滚动事件回调里实时取值，同时加非空判断避免报错，修复后的代码如下：

import React, { useLayoutEffect, createRef } from 'react';
// 注意补全你缺失的H2、classes、skillsList、Card组件等依赖的引入
const Skills = () => {
  const ref = createRef();

  const onScroll = () => {
    // 滚动时再实时取元素位置，加非空判断避免报错
    if (!ref.current) return;
    const topPos = ref.current.getBoundingClientRect().top;
    const scrollPos = window.innerHeight;
    // 元素顶部进入视口底部时触发逻辑
    if (topPos < scrollPos) {
      // 填入你的动画触发代码
    }
  };

  useLayoutEffect(() => {
    // 组件挂载后先执行一次判断，避免元素默认就在视口内没触发动画
    onScroll();
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <Card className={classes.skills} id='skills' ref={ref}>
      <H2>Skills</H2>
      <div className={classes['skills-list-container']}>
        <div className={classes['skills-list']}>{skillsList}</div>
      </div>
    </Card>
  );
};

export default Skills;

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