使用 ReactJS 的 IE 条件定位答案

【问题标题】：IE conditional targeting with ReactJS使用 ReactJS 的 IE 条件定位
【发布时间】：2015-12-06 20:07:57
【问题描述】：

我正在使用 ReactJS 编写一个 Web 应用程序，我需要专门针对 IE9 及以下 浏览器来排除某个类的应用。具体来说，我的客户有一个他们想要使用的自定义 <select> 控件，并且在他们的主网站（不使用 React）上，他们使用条件 cmets 来定位 IE9- 不应用自定义<select> 样式。问题是使用 ReactJS，没有办法做 IE 条件 cmets。我做了一些 google-foo，我能找到的最好的解决方案是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 中进行模拟，或者有人听说过允许我进行 IE 条件检查的 react 插件吗？

jsFiddle for example here

【问题讨论】：

您是否有指标显示您的用户群中有多少百分比仍在使用 IE9 或更低版本？ XP 附带 6 并最多支持 8，但大多数情况下，Windows 7 上的每个人都可能已经获得了安装 IE11 的更新。虽然有很多人的旧 PC 仍在运行 XP 或 Vista，但根据我的经验，他们中的大多数人已经切换到 Chrome 或 FF 等替代浏览器，以克服 IE8/9 的安全/性能/功能问题。也许它甚至不值得？但是你把它放在你的小提琴中的方式对我来说很好（在 IE9 上）
我们的指标显示我们有大约 9% 的 IE 用户使用 IE9...所以我们必须支持它。谢天谢地，我们不必支持 IE8。我认为在小提琴上，您会看到非反应区域正常工作，但反应区域无法正常工作。我需要反应部分正常工作，但反应不支持 HTML cmets，所以条件不能正常工作。解决方案是做一些条件类命名。 @insin 与我最终所做的非常接近。

标签： html css internet-explorer reactjs

【解决方案1】：

其他选项：

Use conditional compilation 编写只能在 IE 中运行的代码 (
Use feature detection检测IE及其版本

如果在您的构建过程中剥离了 cmets，条件编译很容易让您陷入困境，因此从长远来看，特征检测可能不会那么痛苦：

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

【讨论】：

您有什么理由推荐另一个软件包而不是利用document.documentMode？ var ieVersion = (document.documentMode ? document.documentMode : 99);
解决方案与此类似，所以我将其标记为正确答案...

【解决方案2】：

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

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

【讨论】：

提供一些关于代码如何工作的描述有助于理解答案