是否可以在不同的屏幕尺寸上渲染不同的 React 组件

Question

I want to use different components that will render at different breakpoints. I tried to do it with Material-UI

import withWidth, { isWidthUp } from '@material-ui/core/withWidth';

function MyComponent(props) {
  if (isWidthUp('sm', props.width)) {
    return <NavBarMedium/>
           <HomePageMedium/>
  }

  return   <NavBarSmall/>
           <HomePageSmall/>
}

export default withWidth()(MyComponent);

and css

//Any component with className display-small will not be displayed above 600px 
@media (max-width: 600px) {
  .display-small{
    display: none;
  }
}

and React-responsive

<MediaQuery query="(max-device-width: 600px)">
  <NavBarSmall/>
  <HomePageSmall/>
</MediaQuery>

But it seems they only work with normal html. Is there a way to make this work with react components or are there any other ways that this would work?

Answer 1

function MyComponent(props) {
    let isMobile = useRef(false);
    const [mobile, setMobile] = useState(false);

    useEffect(() => {
        const resize = () => {
            if(window.innerWidth > 600) {
                if(isMobile.current) {
                    isMobile.current = false;
                    setMobile(false);
                }
            } 
            else {
                if(!isMobile.current) {
                    isMobile.current = true;
                    setMobile(true)
                }
            }
         }

        window.addEventListener("resize",  resize);
        
        return () => window.removeListener("resize", resize);

    }, [])


    if (!isMobile.current) { /* or !mobile (state variable) */
      return (
          <> 
             <NavBarMedium />
             <HomePageMedium />
          </>
      )
    }
    else {
      return (
          <> 
             <NavBarSmall />
             <HomePageSmall />
          </>
      )
    }
}

Answer 2

I recommend Material ui media query hooks

https://material-ui.com/es/components/use-media-query/

next code show how i use:

export default function MainWraper() {

  // 0px  xs   600px  sm  960px lg   1280px xl  1920px
  const phone =  useMediaQuery("(max-width: 460px)");
  const tablet =  useMediaQuery("(min-width: 451px) and (max-width: 960px)");
  const desktop =  useMediaQuery("(min-width: 961px)");


  if(phone) return (<phonewrapper/>);
  if(tablet) return (<tabletwrapper/>);
  if(desktop) return (<desktoprapper/>);


}