为什么 useMediaQuery 在 React.js 中总是 return false

Question

最近我遇到了来自“react-responsive”的 useMediaQuery 问题。

import { useMediaQuery } from 'react-responsive'

const TestComponent = () => {
  const isDesktopOrLaptop = useMediaQuery({
    query: '(min-width: 1440px)'
  })
  const isTablet = useMediaQuery({ query: '(min-width: 768px)' })
  const isMobile = useMediaQuery({ query: '(max-width: 475px)' })
}

但是我记得去年我成功使用这个模块的时间但是现在这个 returns 总是错误的。
我不知道它发生了什么。
感谢您的所有建议。

Answer 1

我不熟悉 react-responsive，但如果您不喜欢使用该库，MUI 提供了 same hook 并且它工作得很好。

如果您有兴趣自己动手，我还提供了一个自定义挂钩的代码，它同样有效（但功能少得多）。

All-in-one 外部图书馆：

useMediaQuery 来自 MUI。下面是一个监视 600px 屏幕尺寸的简单示例。

import * as React from 'react'
import useMediaQuery from '@mui/material/useMediaQuery'

export default function SimpleMediaQuery()
{
  const matches = useMediaQuery('(min-width:600px)')

  return <span>{`(min-width:600px) matches: ${matches}`}</span>
}

想改用预设断点吗？

const matches = useMediaQuery(theme.breakpoints.up('sm'))

回调？

const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'))

可以通过多种方式自定义此挂钩（有关更多示例，请参阅上面链接的文档）。

没有外部库的自定义挂钩：

如果你想在不依赖外部库的情况下做到这一点，这里有一个简单的钩子，可以监视某些断点，类似于 MUI 的 useMediaQuery。

export const useMediaQuery = (width) =>
{
  const [targetReached, setTargetReached] = useState(false)

  const updateTarget = useCallback((e) =>
  {
    if (e.matches) setTargetReached(true)
    else setTargetReached(false)
  }, [])

  useEffect(() =>
  {
    const media = window.matchMedia(`(max-width: ${width}px)`)
    media.addEventListener('change', updateTarget)

    // Check on mount (callback is not called until a change occurs)
    if (media.matches) setTargetReached(true)

    return () => media.removeEventListener('change', updateTarget)
  }, [])

  return targetReached
}

用法：

// 600px
const matches = useMediaQuery(600)

Answer 2

希望你先检查一下你当前的react版本，如果你用的是旧版本，请更新到最新版本。我正在使用 React 18.0，它在我这边工作得很好。希望对您有所帮助。

为什么 useMediaQuery 在 React.js 中总是 return false

Why does useMediaQuery always return false in React.js

reactjs