使用 ref 获取组件位置时出错（ReactCannot 读取属性 'getBoundingClientRect' of null"）

Posted 2023-02-21

【中文标题】使用 ref 获取组件位置时出错（ReactCannot 读取属性 \'getBoundingClientRect\' of null"）

【英文标题】：Error Getting Component Position with ref (ReactCannot read property 'getBoundingClientRect' of null")使用 ref 获取组件位置时出错（ReactCannot 读取属性 'getBoundingClientRect' of null"）

【发布时间】：2021-11-06 15:00:02

【问题描述】：

我想获取技能组件的位置，并在滚动到达该点时添加动画。但是，它返回错误“TypeError：无法读取属性 'getBoundingClientRect' of null”。我关注了试图关注this blog，但我不知道我做错了什么。有人可以帮帮我吗？

卡片.js

import classes from './Card.module.css';
import React from 'react';

const Card = React.forwardRef((props, ref) => 
  return (
    <section
      className=`$classes.card $props.className`
      id=props.id
      ref=ref
    >
      props.children
    </section>
  );
);

export default Card;

技能.js

const Skills = () => 
  const ref = React.createRef();
  const topPos = ref.current.getBoundingClientRect().top;

  const onScroll = () => 
    const scrollPos = window.scrollY + window.innerHeight;
    if (topPos > scrollPos) 
      // enter animation code here
    
  ;

  useLayoutEffect(() => 
    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;

【参考方案1】：

您在 ref.current 附加到元素之前引用它

创建 ref 后，您需要等待初始渲染，然后该 ref 将附加到实际元素。

通过上述操作，您将在初始渲染结果为空之前访问ref.current。

所以只需将它移动到您的 onScroll 函数中，如下所示：

const onScroll = () => 
  const topPos = ref.current.getBoundingClientRect().top;  <-- MOVE HERE
  const scrollPos = window.scrollY + window.innerHeight;
  if (topPos > scrollPos) 
    // enter animation code here
  
;

---

将您的 ref.current 移动到 eventHandler 主体，因为该处理程序仅在组件完全呈现后才被触发，因此 ref 也已附加。