IE Conditional Targeting with ReactJS

Question

I am writing a web application using ReactJS, and I need to customize IE9 and below tags to exclude class usage. In particular, my client has a user control <select>that they want to use, and on their main website (which does not use React) they use conditional comments for the target IE9 so as not to apply custom styles <select>. The problem is that with ReactJS, there is no way to make conditional comments on IE . I did a bit of google-foo, and the best solution I can find is to embed the HTML directly in the DOM, rather than letting React handle the render .

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

Is there a way to emulate this only in CSS, or has anyone heard of a reaction plugin that would allow me to do IE conditional checks?

jsFiddle for example here

Answer 1

Other parameters:

• Use conditional compilation to write code that will only work in IE (<11)
• Use feature detection to detect IE and its version

Conditional compilation can easily bite you if comments are removed during the build process, so function detection can be less painful in the long run:

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>