这篇文章主要是记录react 在适配IE10的过程中碰到的问题以及解决方法，这样以后有方便查找。
其实支持react在ie10上面运行，需要我们把我们使用的ES6代码转为ie10浏览器支持的ES5,我们可以通过下面这个网址来查看各大浏览器对ES6的支持程度。
环境背景：react-dva-roadhog
kangax.github.io/compat-table/es6/
这个是ECMAScript 6 入门中提供的。
下面正式开始吧：
使用 CommonJS
强烈推荐使用 CommonJS 风格来引入需要的模块。
首先安装这些模块：
npm install --save es5-shim console-polyfill
然后把以下代码插入到入口文件的最前面：
require('es5-shim');
require('es5-shim/es5-sham');
require('console-polyfill');
参考一个真实的例子:React IE8 Hello World Example。
错误 Expected identifier
原因：代码中国或者第三方模块中使用了保留字，比如default。
解决方案：使用 es3ify 或者 es3ify-loader
示例：Fetch IE8;
错误 Exception thrown and not caught
原因：babel 把export * from 'xxx' 编译成了 Object.defineProperty，而 IE8 中不支持 accessor property
解决方案：把 require('es5-shim') require('es5-shim/es5-sham') 插入到入口文件的最上方，并且在代码中不要使用export * from 'xxx'
示例：Hello World
错误 Object expected
原因：可能你使用了 fetch
解决方案：用 es6-promise 和 fetch-ie8 polyfill
示例：Fetch IE8;
错误 'Promise' is undefined
原因：Promise 需要 polyfill
解决方案：用 es6-promise polyfill
示例：Fetch IE8;
错误 Object doesn't support this property or method
原因：可能你使用了 Object.assign
解决方案：用 core-js polyfill
错误 'JSON' is undefined
原因：需要使用 IE8 Standards Mode
解决方案：
添加 <!DOCTYPE html> 和 <meta http-equiv="X-UA-Compatible" content="IE=EDGE"/>
示例：Hello World
上面这一套组合拳下来，入口文件前面插入的代码变成了下面：
"use strict";
require('es5-shim');
require('es5-shim/es5-sham');
require('console-polyfill');
require('es6-promise');
require('core-js');
import '@babel/polyfill';
import 'url-polyfill';
错误：Error: index.a0a9eebd.js from UglifyJs
原因：在我们打包文件时里面有es6的代码，从而造成压缩失败。
解决方案：可以参考我的另一篇文章：不积跬步--Error index.a0a9eebd.js from UglifyJs 的解决过程
错误：调用接口数据没有返回，传输了中文
原因：这个一般表现为在chrome浏览器上页面可以正常显示，而在ie10上面却不行，可以检查一下接口传输的数据是否传输了中文。如果传输了中文，那么就需要进行转码。
解决方案：可以通过encodeURIComponent()或者encodeURI()来进行转码。
示例：没有，自己百度。
错误：为适配ie10浏览器，不可以这样写
错误的写法：
class Person extends React.Component {
state = {
name:this.props.name
};
}
或者
constructor(props) {
super(props);
// SCRIPT5007: 无法获取属性 "b" 的值，对象为 null 或未定义
this.a = this.props.b;
}
原因：在构造函数里不能使用 this.props.xx
解决方案：改为正统写法,不用this.props.xxx，使用继承的props
class Person extends React.Component {
constructor(props){
super(props)
this.state = {
name:props.name
};
}
}
错误：无法获取属性 xxx 的值，对象为 null 或未定义
原因：这种情况一般是组件继承后，无法继承到在构造函数里定义的属性或方法，同样类属性或方法也同样无法继承。
解决方案：使用babel-preset-es2015-ie
安装：
npm install --save-dev babel-preset-es2015-ie
然后在.babelrc文件中添加：
{
"presets": ["es2015-ie"]
}
参考：React+Webpack+Antd+Babel 兼容低版本浏览器
IE 浏览器滚动条无法滑动或者按钮无法点击或者其他的事件无法响应，都可以参考这一条
原因：IE10或者更低版本在解析html的时候，用的是盒模型，如果发现无法点击或者无法滑动的时候，通过查看元素来确认是否有遮罩，从而造成点击事件无法传递到下面。
解决方案：在遮罩的下一层布局添加如下css:
position:relative;
z-Index:99
把遮罩下一层的div整体抬起来，抬到遮罩的上层，这样就可以传递事件了。
在我们的代码里是LabExam.less下
.LabExam{
:global{
.ant-row-flex-space-between{
min-height: 362px;
}
.ant-table {
position: relative;
z-index: 99;
}
}
}
由于公司要求需要适配IE10浏览器，所以以后肯定会碰到更多的问题，会及时更新在这里。
参考文章：
react 项目的一个ie8兼容性问题
React+Webpack+Antd+Babel 兼容低版本浏览器
使用dva和ant-design组件在IE中的兼容问题记录
Make your React app work in IE8
使用 ES6 的浏览器兼容性问题
网友评论