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

react jsjavascript libraryfront end technology更新于 2025/11/19 13:32:17

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