如何解决类型错误:使用 Locomotive Scroll 反应模块时无法读取 null 的属性“offsetHeight”
我正在尝试从 firebase 加载一些图像,并让它们与机车滚动反应模块一起水平滚动。但是,每当我添加下面的 useEffect 部分来初始化机车滚动时,我都会收到以下错误:
我遵循了 LocomotiveScroll 网站和 GitHub 页面上的所有说明,也查看了其他示例,但似乎无法弄清楚。或者我可能错过了什么。
import React,{ useEffect } from "react";
import useFirestore from "../../Hooks/useFirestore";
import "./Astro.css";
import LocomotiveScroll from "locomotive-scroll";
//<a class="gallery__item-link">explore</a>
const Astro = (props) => {
const { docs } = useFirestore("astro");
let i = 1;
const scrollReff = React.createRef();
useEffect(() => {
const scroll = new LocomotiveScroll({
el: scrollReff.current,smooth: true,direction: "horizontal"
});
});
return (
<div>
{docs &&
docs.map((doc) => (
<div key={doc.id}>
<div ref={scrollReff}>
<div className="content">
<div className="gallery">
<figure className="gallery__item">
<div className="gallery__item-img">
<div class="gallery__item-img">
<div
class="gallery__item-imginner"
>
<img src={doc.url} alt={doc.description} />
</div>
</div>
</div>
<figcaption className="gallery__item-caption">
<h2
className="gallery__item-title"
data-scroll
data-scroll-speed="1"
>
{doc.title}
</h2>
<span className="gallery__item-number">{"0" + i++}</span>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
))}
</div>
);
};
export default Astro;
解决方法
React.createRef() 是异步的,因此如果您尝试在 useEffect
中访问它,它将返回 null
。这意味着当您在 scrollRef.current
内部调用 useEffect
时,您尚未为其分配任何实际实例。
在我看来,您需要添加一个条件,因为此问题与异步有关。 在 useEffect 中,当此变量不存在时,您正在使用 scrollReff。为什么?因为在渲染中,您正在调节文档是否存在。如果你了解 useEffect 是如何工作的,你就会明白第一个渲染 useEffect 是找不到这个变量。
const Astro = (props) => {
...
useEffect(() => {
if(!docs) return;
const scroll = new LocomotiveScroll({
...
});
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。