NextJS：如何在自定义挂钩中使用窗口？

Question

ReferenceError: window is not defined

当 NextJS 尝试渲染页面时，服务器端会出现此错误。但您可以在此处编写的挂钩window中使用。useEffect

我的问题是如何创建自定义挂钩。我尝试过类似的事情：

export const useEventListener = (
    target: EventTarget, event: string, listener: EventListenerOrEventListenerObject, trigger = true,
): void => {
    useEffect(() => {
        target.addEventListener(event, listener);
        trigger && target.dispatchEvent(new Event(event));
        return () => target.removeEventListener(event, listener);
    });
};

这里window用的是useEffect. 但我收到了错误，因为当我打电话时

useEventListener(window, 'scroll', () => {...});

NextJS 无法识别它。

我该如何处理？

Answer 1

我不确定该解决方案是最好的，但您可以在客户端window使用globalThiswhich is equal to来代替。window