/

React：如何製作響應式的 JSX

React：如何製作響應式的 JSX

我需要在 React 中，讓側邊欄在大螢幕上呈現一種樣式，而在較小螢幕上呈現另一種樣式，所以我希望能夠在 JSX 中偵測到響應式佈局的變化。

就像這樣：

您可以使用 react-responsive 套件來實現這一點。

1
npm install react-responsive

然後您可以引入 useMediaQuery 鉤子：

1
import { useMediaQuery } from 'react-responsive'

在您的組件中，您可以像這樣使用它：

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

這是我在組件主頁上找到的一個簡單的斷點示例，對於我的需求來說效果很好。

我在一個佈局組件中以以下方式使用它：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 的組件，我認為這樣看起來更好：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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>
 )
}

tags: [“React”, “JSX”, “responsive design”, “react-responsive”]