使用ReactJS的IE条件定位 [英] IE conditional targeting with ReactJS

问题描述

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

I'm writing a web application using ReactJS, and I have a need to target specifically IE9 and below browsers to exclude a class from being applied. Specifically, my client has a custom <select> control that they want to use, and on their main website (which doesn't use React) they use conditional comments to target IE9- to not apply the custom <select> styles. The problem is that with ReactJS, there is no way to do IE conditional comments. I've done a bit of google-foo, and the best solution I can find is to inject the HTML directly into the DOM rather than allow React to handle the render.

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

有没有一种方法可以仅在CSS中进行仿真，或者有人听说过React插件可以让我执行IE条件检查?

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

jsFiddle例如

推荐答案

其他选项:

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

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

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

Conditional compilation can easily bite you if comments are stripped during your build process, so feature detection might 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>

这篇关于使用ReactJS的IE条件定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！