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

在本文中，我们将了解如何在不使用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>
      </>
   );
}

解释

• <BrowserView>中的元素将仅在笔记本电脑或 PC 上显示。

• 同样， <MobileView>中的元素只会在移动设备上显示。

• IsMobile和IsBrowser可以与if-else子句一起使用。

输出结果

浏览器视图

移动视图