根据浏览器屏幕大小有条件地渲染组件视图

Question

我有三个不同的组件代表屏幕尺寸的不同视图。我想根据浏览器视图宽度渲染其中之一。我已经设法使用三元运算符使其工作，但它只适用于两个元素。

谁能告诉我如何在不对其中一个元素使用 display: hidden 的情况下完成此操作？

到目前为止，这是我的代码：

import React, { useState, useEffect } from "react";
import Navbar from "../../shared/components/Navbar/Navbar";
import Page from "../../shared/interface/Page/Page";

{/* elements */}
import DesktopView from "../../home/components/DesktopView/DesktopView";
import MobileView from "../../home/components/MobileView/MobileView";
import TabletView from "../../home/components/TabletView/TabletView";

function Home() {
  const [isDesktop, setDesktop] = useState(window.innerWidth > 650);
  const [isTablet, setTablet] = useState(window.innerWidth > 768);
  const [isMobile, setMobile] = useState(window.innerWidth > 640);

  const updateMedia = () => {
    setDesktop(window.innerWidth > 1024);
    setTablet(window.innerWidth > 768);
    setMobile(window.innerWidth > 640);
  };

  useEffect(() => {
    window.addEventListener("resize", updateMedia);
    return () => window.removeEventListener("resize", updateMedia);
  });

  return (
    <Page>
      <Navbar />

      {/* Elements should go here */}
    </Page>
  );
}

export default Home;

Answer 1

您可以尝试使用以下代码而不是三进制

isDesktop && <DesktopView />
isTablet && <TabletView />
isMobile && <MobileView />

因此，如果 isDesktop 为真，则只有 DesktopView 会渲染，同样地，isTablet 会控制 TabletView，isMobile 会控制 MobileView渲染

根据浏览器屏幕大小有条件地渲染组件视图

Conditionally render component views based on browser screen size

reactjs

tailwind-css