如何检测窗口是否加载到反应中

Question

这几天我一直在尝试解决这个问题，但似乎无法让它发挥作用。

首先，如果客户端以移动或桌面格式查看，我有一个自定义挂钩。

看起来像这样：

import { useState, useEffect } from "react";

function getWindowDimensions() {
  if (typeof window !== "undefined") {
    const { innerWidth: width, innerHeight: height } = window;
    console.log("defined");
    console.log(width < 768);
    return width < 768 ? true : false;
  }
  console.log("undefined");
  return true;
}

export default function useWindowDimensions() {
  const [windowDimensions, setWindowDimensions] = useState(
    getWindowDimensions()
  );
  function handleResize() {
    setWindowDimensions(getWindowDimensions());
  }
  useEffect(() => {
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return windowDimensions;
}

现在我正在尝试使用它来在我的网站上的页脚或页眉样式交互之间切换：

import useWindowDimensions from "hooks/useWindowDimensions";
import React, { useEffect } from "react";
import Footer from "./Footer";
import Header from "./Header";

export default function Shim(props) {
  const isMobile = useWindowDimensions();

  return (
    <div>
      {!isMobile && <Header {...props} />}
      {isMobile && <Footer {...props} />}
    </div>
  );
}

我希望这可以完美运行，但是看起来好像在 typeof window === "undefined" 时设置了初始值，因此，移动视图以桌面大小呈现（如果我在网站已加载，它按预期工作。）有人愿意帮助我如何让它正常工作吗？

谢谢！

Answer 1

我用这个上下文 api 钩子解决了同样的问题。

import React, { createContext, useContext, useEffect, useState } from 'react';

export const SizeContext = createContext();

const SizeContextProvider = ({ children }) => {
    const [width, setWidth] = useState(window.innerWidth);
    const [isMobile, setIsMobile] = useState(true);
    const [isDesktop, setIsDesktop] = useState(true);

    function debounce(fn, ms) {
        let timer;
        return () => {
            clearTimeout(timer);
            timer = setTimeout(() => {
                timer = null;
                fn.apply(this, arguments);
            }, ms);
        };
    }

    useEffect(() => {
        const debouncedHandleResize = debounce(() => {
            setWidth(window.innerWidth);
        }, 0);

        window.addEventListener('resize', debouncedHandleResize);

        return () => {
            window.removeEventListener('resize', debouncedHandleResize);
        };
    });

    useEffect(() => {
        if (width <= 575) {
            setIsMobile(true);
            setIsDesktop(false);
        } else if (width >= 576 && width < 767) {
            setIsMobile(true);
            setIsDesktop(false);
        } else if (width >= 768 && width < 991) {
            setIsMobile(false);
            setIsDesktop(true);
        } else if (width >= 992 && width < 1199) {
            setIsMobile(false);
            setIsDesktop(true);
        } else {
            setIsMobile(false);
            setIsDesktop(true);
        }
    }, [width]);

    return (
        <SizeContext.Provider value={{ width, isDesktop, isMobile }}>
            {children}
        </SizeContext.Provider>
    );
};

export const useSizeContext = () => useContext(SizeContext);

export default SizeContextProvider;

import context api 使用任何组件。

const App = () => {
  return (
    <SizeContextProvider>
      <Device />
    </SizeContextProvider>
  )
}

这里设备组件使用Context Api

const Device = () => {
    const { isMobile, isDesktop } = useSizeContext();

    return (
        <div>
            {isMobile && <h1> Small Device </h1>}
            {isDesktop && <h1> Largest Device </h1>}
        </div>
    );
}