基于ReactJS的IE条件靶向

Question

我正在使用ReactJS编写一个web应用程序，我需要专门针对IE9和浏览器，以排除类的应用。具体来说，我的客户端有一个他们想要使用的自定义<select>控件，并且在他们的主网站(不使用React)上，他们使用条件注释来针对IE9- -而不是应用自定义<select>样式。问题是，与ReactJS，没有办法做IE条件注释。我做了一些google，我能找到的最好的解决方案就是直接将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>

Answer 2

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

<div>
  {isIE ?<div>
    Internet Explorer
  </div>:<div>
    Not Internet Explorer
  </div>}
</div>