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

Question

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

Card.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;

Skills.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;

Answer 1

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

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

通过上述操作，您将在初始渲染结果为 null 之前访问 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 也已附加。