如何检测窗口加载在react中

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=="；"未定义"；，因此，移动视图是以桌面大小呈现的(如果我在加载网站后调整窗口大小，它会按预期工作。(有人愿意帮助我了解如何使其正常工作吗？

谢谢！

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;

导入上下文api使用任何组件。

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

此处设备组件使用上下文Api

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