0

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

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;

技能.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;
4

1 回答 1

0

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 也已经附加。

于 2021-09-10T03:09:08.370 回答