react專案中不同寬度斷點處理

分页需带参發表於2024-08-07
React斷點

當react專案中，你需要透過判斷當前螢幕寬度改變，對不同寬度斷點進行不同的處理，例如，當螢幕寬度縮小至768px及以下時，需要將某一個屬性值改變，或者是當螢幕寬度縮小或者放大到某一寬度時，需要呼叫某個方法

使用window.matchMedia()監聽媒體查詢
import React, { useEffect } from 'react';  
  
function ResponsiveComponent() {  
  useEffect(() => {  
    // 定義不同的媒體查詢  
    const smallScreen = window.matchMedia('(max-width: 600px)');  
    const mediumScreen = window.matchMedia('(min-width: 601px) and (max-width: 992px)');  
    const largeScreen = window.matchMedia('(min-width: 993px) and (max-width: 1200px)');  
    const xlScreen = window.matchMedia('(min-width: 1201px) and (max-width: 1536px)');  
    const xxlScreen = window.matchMedia('(min-width: 1537px)');  
  
    // 定義響應不同螢幕大小的方法  
    const handleSmallScreen = () => {  
      console.log('Small screen');  
      // 呼叫適合小螢幕的方法  
    };  
  
    const handleMediumScreen = () => {  
      console.log('Medium screen');  
      // 呼叫適合中螢幕的方法  
    };  
  
    const handleLargeScreen = () => {  
      console.log('Large screen');  
      // 呼叫適合大螢幕的方法  
    };  
  
    const handleXlScreen = () => {  
      console.log('XL screen');  
      // 呼叫適合XL螢幕的方法  
    };  
  
    const handleXxlScreen = () => {  
      console.log('XXL screen');  
      // 呼叫適合XXL螢幕的方法  
    };  
  
    // 監聽變化  
    smallScreen.addListener(handleSmallScreen);  
    mediumScreen.addListener(handleMediumScreen);  
    largeScreen.addListener(handleLargeScreen);  
    xlScreen.addListener(handleXlScreen);  
    xxlScreen.addListener(handleXxlScreen);  
  
    // 初始呼叫  
    smallScreen.matches ? handleSmallScreen() : null;  
    mediumScreen.matches ? handleMediumScreen() : null;  
    largeScreen.matches ? handleLargeScreen() : null;  
    xlScreen.matches ? handleXlScreen() : null;  
    xxlScreen.matches ? handleXxlScreen() : null;  
  
    // 清理  
    return () => {  
      smallScreen.removeListener(handleSmallScreen);  
      mediumScreen.removeListener(handleMediumScreen);  
      largeScreen.removeListener(handleLargeScreen);  
      xlScreen.removeListener(handleXlScreen);  
      xxlScreen.removeListener(handleXxlScreen);  
    };  
  }, []);  
  
  return (  
    <div>  
      {/* 你的內容 */}  
    </div>  
  );  
}  
  
export default ResponsiveComponent;
注意
  • useEffect中的清理函式確保了當元件解除安裝時，所有的事件監聽器都會被移除，避免記憶體洩漏。
  • 你可以根據需要調整媒體查詢的斷點值，以匹配你的設計或Tailwind CSS的斷點設定。
  • 這種方式不僅限於呼叫console.log，你可以在其中執行任何你需要的JavaScript程式碼，比如更新狀態、傳送資料到伺服器等。

相關文章