使用 ReactJS 的 IE 条件定位

IT技术 html css internet-explorer reactjs
2021-05-12 11:06:54

我正在使用 ReactJS 编写一个 Web 应用程序，我需要专门针对IE9 及以下浏览器以排除应用类。具体来说，我的客户有一个<select>他们想要使用的自定义控件，并且在他们的主网站（不使用 React）上，他们使用条件注释来定位 IE9-不应用自定义<select>样式。问题是使用 ReactJS，没有办法做 IE 条件注释。我已经做了一些 google-foo，我能找到的最好的解决方案是将 HTML 直接注入 DOM 而不是让 React 处理 render。

<div>
    <!--[if lte IE 9]>
    <select>
    <![endif] -->
    <!--[if !IE]> -->
    <select className = "customSelect">
    <!-- <![endif] -->
        <!-- OPTIONS GO HERE -->
    </select>
</div>

有没有办法仅在 CSS 中模拟这一点，或者有没有人听说过可以让我进行 IE 条件检查的 react 插件？

jsFiddle 例如这里

2个回答

其他选项：

如果在构建过程中删除注释，条件编译很容易咬你，所以从长远来看，特性检测可能会不那么痛苦：

var ie = require('ie-version')
...
var className = 'customSelect'
if (ie.version && ie.version <= 9) {
  className = ''
}
return <div>
  <select className={className}>
  ...
  </select>
</div>

let isIE = /*@cc_on!@*/false || !!document.documentMode;

<div>
  {isIE ?<div>
    Internet Explorer
  </div>:<div>
    Not Internet Explorer
  </div>}
</div>
其它你可能感兴趣的问题
上一篇react-leaflet 获取当前的经纬度 onClick 下一篇Enzyme 为浅渲染的 React 组件上的 prop 返回 null