Question

我正在使用一个名为useScrollPosition的钩子，以根据滚动位置为页面中的某些内容（不透明度，高度等）设置动画。问题是，如果页面被向下滚动然后刷新，则在页面加载时，Next.js会将其呈现在服务器上，当它到达页面时它不会更新，因此滚动位置（因此是动画组件）都错了。

该挂钩旨在不对服务器执行任何操作，因此服务器将使用默认值进行渲染，然后在组件首次访问该页面时应正确更新该挂钩，但是由于某种原因它没有这样做。

我已经设置了一个简单的代码和框来说明这一点，但其中包括以下重要代码。

https://codesandbox.io/s/p5y6262qzm

import React, { useState, useEffect } from "react";

const useScrollPosition = () => {
  if (typeof window === "undefined") return 500;

  // Store the state
  const [scrollPos, setScrollPos] = useState(window.pageYOffset);

  // On Scroll
  const onScroll = () => {
    setScrollPos(window.pageYOffset);
  };

  // Add and remove the window listener
  useEffect(() => {
    window.addEventListener("scroll", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
    };
  });

  return scrollPos;
};

export default useScrollPosition;

如您所见，在服务器上呈现时，它将设置为500的任意值，这样我就可以证明问题所在。

import useScrollPosition from "../hooks/useScrollPosition.js";

const boxStyles = {
  position: "fixed",
  width: "100%",
  top: 0,
  backgroundColor: "hotpink"
};

const Box = () => {
  const scrollPos = useScrollPosition();
  const headerHeight = scrollPos;
  return (
    <div style={{ height: headerHeight, ...boxStyles }}>
      Height: {headerHeight}
    </div>
  );
};

export default Box;

粉红色的框应该在服务器上以500的高度呈现，但是一旦页面点击浏览器并呈现，则应将其设置为与滚动位置相等的高度，但是直到您移动滚动条时才会如此。 / p>

什至更奇怪的是，我正在使用滚动值来更新框的高度并更新文本标签。通过运行代码沙箱，您将始终可以看到标签正确但盒子的高度不正确的情况。

我们将不胜感激。

在next.js网站中页面加载后组件样式不会重新呈现

0 个答案: