React JS 中的设备检测和响应式设计

Z时代
2024-01-10
分类：综合

在本文中，我们将了解如何在不使用if-else子句的情况下根据设备呈现页面。为此，我们将使用react-device-detect包。此功能可以帮助我们在不使用任何媒体查询的情况下创建响应式网页。那么，让我们开始吧。

示例

首先创建一个 React 项目 -

npx create-react-app tutorialpurpose

转到项目目录 -

cd tutorialpurpose

下载react-device-detect包 -

npm install react-device-detect --save

我们将使用这个包来添加默认的媒体查询或默认的条件渲染，它们是在包内预先制作的。

在App.js中添加以下代码行-

import {
   BrowserView,
   MobileView,
   isBrowser,
   isMobile,
} from "react-device-detect";
export default function App() {
   return (
      <>
         <BrowserView>
            <h1> This is rendered only in browser </h1>
         </BrowserView>
         <MobileView>
            <h1> This is rendered only on mobile </h1>
         </MobileView>
      </>
   );
}