如何通过 javascript/bootstrap 根据屏幕尺寸执行功能？
这是 div :
<div className="col-sm hidden-md hidden-lg"></div>
我想设置这个功能(仅限小屏幕):
const [ navOpen, setNavOpen ] = useState(true)
代码是reactjs，屏幕很小的时候如何调用函数？
最佳答案
我怀疑您使用围绕 Window.matchMedia 构建的 useEffect 会更好比使用 innerWidth 的东西。这在 JavaScript 中相当于 css 媒体查询。这样你就可以使用事件驱动的东西。
可能是这样的:
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 的建议添加空依赖项数组
关于javascript - 如何根据屏幕尺寸执行功能javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60802695/