在 Next JS 中有条件地使用 React 钩子

Question

编辑：这个问题最初是关于在 CodeSandbox 环境中使用 React 钩子时出现类型错误，但我已经对其进行了更新，以便对未来的访问者有用。

我正在使用以下代码尝试创建一个钩子，以使用滚动位置为网站标题的高度设置动画。问题是我尝试了各种方法来阻止它在服务器上出错，但不断收到各种错误（尽管检查了窗口对象的存在）。

我的原始问题中有一些示例代码，我更新了以下代码沙箱。

https://codesandbox.io/s/p5y6262qzm

原始问题：

未处理的拒绝（TypeError）：Object(…) 不是函数

首先我知道这个标题还有其他问题，但似乎有多种原因，我找不到涵盖我的特殊情况的答案。

我可以用来生成示例的最简单（不完整）代码是这样的......

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

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

  return scrollPos;
};

export default useScrollPosition;

虽然有一个更完整的示例说明我在此代码框中尝试做的事情：

https://codesandbox.io/s/p5y6262qzm

我猜这很简单，我似乎无法理解它。

Answer 1

此 Next.js 设置会导致

TypeError: window.addEventListener 不是函数

客户端出错，因为window global 被局部变量遮蔽：

const window = window || {
  width: 0,
  height: 0,
  pageXOffset: 0,
  pageYOffset: 0
};

应该是：

const w = (typeof window !== 'undefined' && window) || {
  width: 0,
  height: 0,
  pageXOffset: 0,
  pageYOffset: 0
};

这将导致在服务器端渲染期间使用模拟对象，而在客户端渲染期间使用window。

更好的解决方案是避免使用特定于客户端的组件，例如与react-no-ssr。由于有条件地应用钩子（useScrollPosition 钩子）不是一个好习惯，因此它是一个使用此钩子的组件，需要有条件地呈现。