如何在不调用 window 的情况下在 React 中获取设备宽度/高度 object

Question

有没有办法在不使用“窗口”的情况下访问 React 或 Next.js 中的设备宽度或高度。 或“文件”。 我知道我们可以用钩子 useEffect 得到这个，我们没有这个错误：

ReferenceError: window is not defined

但如果我只需要访问一次宽度，那就太过分了

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;

Answer 1

我会使用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>

灵感来自https://github.com/streamich/react-use/blob/master/src/useMedia.ts

如果你想完全删除你的useEffect ，我想你可以做这样的事情，如果你只需要在安装时找到一次宽度：

  let isMobile = null;
  
  if (typeof window !== "undefined") {
    isMobile = window.innerWidth < 450;
  }

  console.log(isMobile);