如何按屏幕大小javascript执行功能

Question

如何通过屏幕大小 javascript/bootstrap 执行功能？这是 div ： <div className="col-sm hidden-md hidden-lg"></div>我想设置这个功能（只在小屏幕上）： const [ navOpen, setNavOpen ] = useState(true)代码在reactjs中，屏幕小时如何调用函数？

Answer 1

我怀疑使用Window.matchMedia 构建useEffect比使用. 这是 css 媒体查询的 JavaScript 等价物。这样你就可以使用事件驱动的东西了。innerWidth

可能是这样的：

const [ navOpen, setNavOpen ] = useState(true)

useEffect(() => {

  const x = window.matchMedia("(max-width: 700px)")

  function myFunction(e) {

    setNavOpen(false);

  };

  x.addListener(myFunction)

  return () => x.removeListener(myFunction);

}, []);

注意：由于它有一个事件监听器，请注意有一个清理函数被返回以删除监听器。

信用：我从w3schools复制了我的部分代码

编辑：根据@agus-zubiaga 的推荐添加空依赖数组

Answer 2

您可以使用window.innerHeight来计算您的useState默认值：

const [ navOpen, setNavOpen ] = useState(window.innerWidth > 320)

但是，如果调整屏幕大小时导航应该自动打开和关闭。您可以使用Window.matchMedia()来对屏幕尺寸做出反应。

如果这是一次性的，您可以像David784 的回答useEffect那样直接在钩子中使用它。

就我而言，由于我在一个大型应用程序上工作，其中包含许多需要对屏幕大小做出反应的组件，我使用了一个名为react-responsive的库。它简化了 React 中的媒体查询。

Answer 3

例如，您可以在 useEffect 中检查窗口的宽度和高度，并将导航设置为打开或关闭。

useEffect({

    const width = windows.innerWidth;

    const height = windows.innerHeight;

    if(height <= 720 && width <= 420){

      setNavOpen(true)

    }

  }, [])