ReactJS中的浏览器检测

  • Z时代
  • 2024-01-10
  • 分类：问答

有什么方法可以使用React检测IE浏览器并重定向到页面或提供任何有用的信息。我在JavaScript中找到了一些东西，但不确定如何将其与React +

TypeScript一起使用。

var isEdge = !isIE && !!window.StyleMedia;

回答：

您走在正确的轨道上，可以使用它们有条件地渲染jsx或帮助进行路由…

我已经成功地使用了以下内容。

// Opera 8.0+
const isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
const isFirefox = typeof InstallTrigger !== 'undefined';
// Safari 3.0+ "[object HTMLElementConstructor]" 
const isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));
// Internet Explorer 6-11
const isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
const isEdge = !isIE && !!window.StyleMedia;
// Chrome 1 - 71
const isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
// Blink engine detection
const isBlink = (isChrome || isOpera) && !!window.CSS;

请注意，由于浏览器的更改，它们每个都有机会被弃用。

我在React中这样使用它们：

 content(props){
    if(!isChrome){
     return (
      <Otherjsxelements/>
     )
    }
    else { 
     return (
      <Chromejsxelements/>
     )
    }
  }

然后通过在我的主要组件中调用{this.Content（）}来呈现不同浏览器特定的元素。

伪代码可能看起来像这样……（未经测试）：

import React from 'react';
const isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
export default class Test extends React.Component {
  content(){
    if(isChrome){
        return (
            <div>Chrome</div>
        )
    } else {
        return (
            <div>Not Chrome</div>
        )
    }
  }
    render() {
        return (
            <div>Content to be seen on all browsers</div>
            {this.content()}
        )
    }
}

以上是 ReactJS中的浏览器检测 的全部内容， 来源链接： utcz.com/qa/420526.html

回到顶部