使用ReactJS进行IE条件定位

Question

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

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

有没有办法在CSS中模拟这个,或者有没有人听说过反应插件可以让我进行IE条件检查？

jsFiddle例如这里

Answer 1

其他选择:

• 使用条件编译来编写只能在IE中运行的代码(<11)
• 使用功能检测来检测IE及其版本

如果在构建过程中删除了注释,则条件编译很容易咬你,因此从长远来看,功能检测可能不那么痛苦:

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