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 組件，以便它知道如何渲染自己。

您也可以使用不同的方式來創建包裝 JSX 的組件，我認為這樣看起來更好：

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>
 )
}