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 ?...