如何通过屏幕大小 javascript 执行功能

Question

如何通过屏幕大小 javascript/bootstrap 执行功能？

这是 div ： <div className="col-sm hidden-md hidden-lg"></div>

我想设置此功能（仅在小屏幕中）： const [ navOpen, setNavOpen ] = useState(true)

代码在reactjs中，当屏幕很小时如何调用函数？

Answer 1

我怀疑你会觉得很具有更好useEffect周围建Window.matchMedia比使用一些innerWidth 。 这是 css 媒体查询的 JavaScript 等价物。 这样你就使用了事件驱动的东西。

可能是这样的：

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

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

useEffect({
    const width = windows.innerWidth;
    const height = windows.innerHeight;
    if(height <= 720 && width <= 420){
      setNavOpen(true)
    }
  }, [])

Answer 3

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

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

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

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

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