如何在react中根据屏幕宽度进行条件渲染？

import React, { useState, useEffect } from 'react';

function ResponsiveComponent() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <div>
      {width < 600 ? (
        <p>Mobile view</p>
      ) : width < 1024 ? (
        <p>Tablet view</p>
      ) : (
        <p>Desktop view</p>
      )}
    </div>
  );
}

export default ResponsiveComponent;

import React from 'react';
import './ResponsiveComponent.css';

function ResponsiveComponent() {
  return (
    <div>
      <div className="mobile">Mobile view</div>
      <div className="tablet">Tablet view</div>
      <div className="desktop">Desktop view</div>
    </div>
  );
}

export default ResponsiveComponent;

.mobile {
  display: none;
}

.tablet {
  display: none;
}

.desktop {
  display: block;
}

@media (max-width: 599px) {
  .mobile {
    display: block;
  }
}

@media (min-width: 600px) and (max-width: 1023px) {
  .tablet {
    display: block;
  }
}

@media (min-width: 1024px) {
  .desktop {
    display: block;
  }
}

import React from 'react';
import { useMediaQuery } from 'react-responsive';

function ResponsiveComponent() {
  const isMobile = useMediaQuery({ maxWidth: 599 });
  const isTablet = useMediaQuery({ minWidth: 600, maxWidth: 1023 });
  const isDesktop = useMediaQuery({ minWidth: 1024 });

  return (
    <div>
      {isMobile && <p>Mobile view</p>}
      {isTablet && <p>Tablet view</p>}
      {isDesktop && <p>Desktop view</p>}
    </div>
  );
}

export default ResponsiveComponent;