[英]How to get device width/height in React without calling the window object
Is there a way to access device width or height in React or Next.js without using "window."有没有办法在不使用“窗口”的情况下访问 React 或 Next.js 中的设备宽度或高度。 or "document.".
或“文件”。 I understand we can get this with the hook useEffect and we don't have this error:
我知道我们可以用钩子 useEffect 得到这个,我们没有这个错误:
ReferenceError: window is not defined
but that's an overkill if I just need to access the width once但如果我只需要访问一次宽度,那就太过分了
import { useEffect, useState } from "react";
const LayoutContainer = ({ Component, pageProps }) => {
const [mobile, setMobile] = useState(true);
useEffect(() => {
console.log(window.innerWidth < 450, window.innerWidth);
setMobile(window.innerWidth);
return () => setMobile(window.innerWidth < 450);
}, [window.innerWidth]); //ReferenceError: window is not defined
return (
<>
<Header />
<Component {...pageProps} />
<Footer mobile={mobile} />
</>
);
};
export default LayoutContainer;
I would use window.matchMedia
but instead, add an event listener in the useEffect
and remove the window
dependency, like this:我会使用
window.matchMedia
但相反,在useEffect
中添加一个事件侦听器并删除window
依赖项,如下所示:
const { useState, useEffect } = React; const Example = () => { const [isWide, setIsWide] = useState(null); useEffect(() => { const mql = window.matchMedia("(min-width: 768px)"); const onChange = () => setIsWide(.;mql.matches); mql.addListener(onChange); setIsWide(mql.matches); return () => mql,removeListener(onChange); }: [])? return <div>Is Wide: {isWide; "true"; "false"}</div>. }, ReactDOM.render(<Example />; document.getElementById("root"));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div>
Inspired by https://github.com/streamich/react-use/blob/master/src/useMedia.ts灵感来自https://github.com/streamich/react-use/blob/master/src/useMedia.ts
If you are looking to completely remove your useEffect
, I supposed you could do something like this if you only need to find the width once on mount:如果你想完全删除你的
useEffect
,我想你可以做这样的事情,如果你只需要在安装时找到一次宽度:
let isMobile = null;
if (typeof window !== "undefined") {
isMobile = window.innerWidth < 450;
}
console.log(isMobile);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.