Login
芋圆社区 > 编程 > React > react-device-detect

react-device-detect

793
0
2024-02-23
2024-02-23
Hey、小怪兽

  • • react-device-detect 是个能检测设备,并根据检测到的设备类型渲染视图的库,一般是一个网页想做PC和移动端的适配的时候可以使用
  • • 先安装:
  • npm install react-device-detect --save
    # or
    yarn add react-device-detect --save
  • • 官方的用法已经非常详细了,先是 view 的用法,我也是用这个,直接贴我的代码了:
  • import { BrowserView, MobileView } from "react-device-detect";
    
    function App() {
      return (
        <BrowserView renderWithFragment>
          <div>浏览器端</div>
        </BrowserView>
        <MobileView renderWithFragment>
          <div>手机端</div>
        </MobileView>
      );
    }
    
    export default App;
    
  • • 也可以用 isMobile,isBrowser 这些来判断:
  • import { isMobile } from 'react-device-detect';
    
    function App() {
      renderContent = () => {
        if (isMobile) {
          return <div> This content is available only on mobile</div>
        }
        return <div> ...content </div>
      }
    
      render() {
        return this.renderContent();
      }
    }
  • • 贼多方法,和那个 bowser 库有点像的:

下一篇:react-html-parser

Message Board
回复
回复内容不允许为空
留言字数要大于2,小于200!
提交成功,5s后刷新页面!
编程导航

react-device-detect

react-html-parser

获取用户操作系统和浏览器信息

状态管理工具Redux和hook

Copyright © 2020 芋圆社区

Powered by 浙ICP备2020039309号-1

此页面不支持夜间模式!

已进入夜间模式!

已进入普通模式!

搜索框不允许为空

签到成功!经验+5!芋圆币+2!

签到失败!今日已签到!

需要登录社区账号才可以进入!

复制成功
寄,页面未加载完成或页面无锚点