相关疑难解决方法(0)

我面临着一个我似乎无法解决的问题。

我有一个自定义挂钩，用于设置窗口的高度和宽度。但由于 nextjs 是 SSR，我收到窗口未定义的错误。

我的问题在于将钩子放入 if 语句或 useeffect 钩子中。

当前代码（useWindowDimensions.tsx）：

import { useState, useEffect } from 'react'

function getWindowDimensions() {
    const { innerWidth: width, innerHeight: height } = window
    return {
        width,
        height,
    }
}

export default function useWindowDimensions() {
    const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions())

    useEffect(() => {
        function handleResize() {
            setWindowDimensions(getWindowDimensions())
        }

        window.addEventListener('resize', handleResize)
        // code here
        return () => window.removeEventListener('resize', handleResize)
    }, [])

    return windowDimensions
}

当前代码：

const { height, width } = useWindowDimensions()

const dimensions = …

尝试从“react-facebook-pixel”导入ReactPixel；但是当我这样做时，它会抛出一个引用错误，指出窗口未定义。

 module.exports = require("react-facebook-pixel");

是我导入 ReactPixel 时出现问题的特定代码行。

我使用 NextJs 来利用服务器端渲染。而且我的应用程序中有一个导航栏，它应该随滚动位置更改样式。如何在 NextJs 应用程序上检查窗口是否滚动超过 100 像素？