Использование React-хуков условно в Next JS - PullRequest
Новая
       7

Использование React-хуков условно в Next JS

0 голосов
/ 29 декабря 2018

РЕДАКТИРОВАТЬ: Первоначально этот вопрос касался ошибки типа при использовании перехватчиков React в среде CodeSandbox, но я обновил ее, чтобы она была полезна для будущих посетителей.

Я использую следующий код, чтобы попробоватьсоздать ловушку для использования позиции прокрутки для анимации высоты заголовка сайта.Беда в том, что я пробовал различные методы, чтобы заставить его перестать работать с ошибками на сервере, но продолжаю получать различные ошибки (несмотря на проверку существования объекта окна).

В моем примере был какой-то пример кодаисходный вопрос, и я обновил следующую изолированную программную среду кода.

https://codesandbox.io/s/p5y6262qzm

ОРИГИНАЛЬНЫЙ ВОПРОС:

Необработанный отказ (TypeError): Объект (…) не является функцией

Прежде всего, я знаю, что есть другие вопросы с этим названием, но, кажется, есть несколько причин, и я не могу найти ответ, который охватывает мой конкретный случай.

Самый простой (неполный) код, который я могу использовать, чтобы сгенерировать пример, это ... 

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

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

  return scrollPos;
};

export default useScrollPosition;

Хотя есть более полный пример того, что я пытаюсь сделать в этом коде andbox:

https://codesandbox.io/s/p5y6262qzm

Полагаю, это что-то очень простое, я просто не могу понять, как это сделать.

1 Ответ

0 голосов
/ 31 декабря 2018

Эта установка 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 hook) условно, это компонент, использующий этот хук, который должен быть отображен условно.

...