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代码，比如更新状态、发送数据到服务器等。