[英]useMediaQuery to detect multiple breakpoints
我正在尝试检测我的应用程序上的多个断点,以便在 Grid 上生成的列是动态的。 我能够做到这一点,但代码似乎相当重复。 有没有办法进一步简化我的代码?
const isMdUp = useMediaQuery(({ breakpoints }) => breakpoints.up('md'));
const isSmUp = useMediaQuery(({ breakpoints }) => breakpoints.up('sm'));
const isMdDown = useMediaQuery(({ breakpoints }) => breakpoints.down('md'));
let imageListCol = 1;
if (isMdUp) {
imageListCol = 3;
} else if (isSmUp && isMdDown) {
imageListCol = 2;
}
return (
<ImageList cols={imageListCol} gap={20}>
...
</ImageList>
)
是的,您可以删除其中之一:
const isMdUp = useMediaQuery(({ breakpoints }) => breakpoints.up('md'));
const isSmUp = useMediaQuery(({ breakpoints }) => breakpoints.up('sm'));
// removing the isMdDown
// const isMdDown = useMediaQuery(({ breakpoints }) => breakpoints.down('md'));
let imageListCol = 1;
if (isMdUp) {
imageListCol = 3;
} else if (isSmUp && !isMdUp) { // and we are going to use the opposite of isMdUp
imageListCol = 2;
}
return (
<ImageList cols={imageListCol} gap={20}>
...
</ImageList>
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.