TypeError：使用机车滚动反应模块时无法读取 null 的属性“offsetHeight”答案

【问题标题】：TypeError: Cannot read property 'offsetHeight' of null when using the Locomotive Scroll react moduleTypeError：使用机车滚动反应模块时无法读取 null 的属性“offsetHeight”
【发布时间】：2021-05-12 03:12:20
【问题描述】：

我正在尝试从 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;

【问题讨论】：

标签： javascript reactjs scroll locomotive-scroll

【解决方案1】：

React.createRef() 是异步的，所以如果你尝试在useEffect 中访问它，它将返回null。这意味着当您在 useEffect 内部调用 scrollRef.current 时，您还没有为其分配任何真实实例。

【讨论】：

所以我在没有使用效果钩子的情况下尝试了它，它仍然有同样的问题。我这样做是因为机车卷轴文件是这么说的。我尝试的另一种方式是这样的： const lscroll = new LocomotiveScroll({ el: document.querySelector('[data-scroll-container]'), smooth: true, direction: 'horizontal'});没有 react.createref
对不起，我只知道为什么你的代码会产生错误，因为我对 React 有经验。我没有使用 LocomotiveScroll，所以我没有您需要的答案。

【解决方案2】：

在我看来，您需要添加一个条件，因为此问题与异步有关。在 useEffect 中，当此变量不存在时，您正在使用 scrollReff。为什么？因为在渲染中，如果存在文档，您正在调节。如果你了解 useEffect 是如何工作的，你就会明白第一次渲染 useEffect 是找不到这个变量的。

const Astro = (props) => {
  ...

  useEffect(() => {
    if(!docs) return;
    const scroll = new LocomotiveScroll({
      ...
    });
  });

【讨论】：