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 子句配合使用。

輸出

瀏覽器檢視

移動檢視

Ath Tripathi

更新時間：2021 年 9 月 29 日

800 次檢視

啟動你的 職業生涯

完成課程獲得認證

開始