React制作响应式JSX的方法

我需要让侧边栏在React的大屏幕上以一种特定的方式出现，而在小屏幕上则以另一种方式出现，所以我想有一些方法来检测JSX中响应式布局的变化。

像这样。

你可以使用 react-responsive包来做到这一点。

npm install react-responsive

然后你就可以导入useMediaQuery 这个钩子。

import { useMediaQuery } from 'react-responsive'

在你的组件中，你可以像这样使用它。

  const isBigScreen = useMediaQuery({ query: '(min-device-width: 1224px)' })
  const isSmallScreen = useMediaQuery({ query: '(max-width: 1224px)' })

这是我在组件主页上找到的一个简单的断点例子，它们对我的需求来说效果很好。

我在一个布局组件中是这样使用它的。

import { useMediaQuery } from 'react-responsive'

export default function Layout({ children }) {
  const isBigScreen = useMediaQuery({ query: '(min-device-width: 1224px)' })
  const isSmallScreen = useMediaQuery({ query: '(max-width: 1224px)' })

  return (
    <div>
        {isSmallScreen ? (
          <LeftSidebar small={true} />
        ) : (
          <LeftSidebar />
        )}
    </div>
  )
}

我用它把一个small 道具传递给一个LeftSidebar 组件，所以它知道如何渲染自己。

你也可以做不同的事情，创建组件来包裹JJSX，我觉得这样做更有吸引力。

import { useMediaQuery } from 'react-responsive'

const BigScreen = ({ children }) => {
  return useMediaQuery({ minWidth: 992 }) ? children : null
}

const SmallScreen = ({ children }) => {
  return useMediaQuery({ maxWidth: 991 }) ? children : null
}

export default function Layout({ children }) {
  return (
      <div>
        <SmallScreen>
          <LeftSidebar small={true} />
        </SmallScreen>
        <BigScreen>
          <LeftSidebar />
        </BigScreen>
      </div>
    </div>
  )
}