這篇文章主要是記錄react 在適配IE10的過程中碰到的問題以及解決方法，這樣以后有方便查找。
其實(shí)支持react在ie10上面運(yùn)行，需要我們把我們使用的ES6代碼轉(zhuǎn)為ie10瀏覽器支持的ES5,我們可以通過下面這個網(wǎng)址來查看各大瀏覽器對ES6的支持程度。
環(huán)境背景：react-dva-roadhog
kangax.github.io/compat-table/es6/
這個是ECMAScript 6 入門中提供的。
下面正式開始吧：
使用 CommonJS
強(qiáng)烈推薦使用 CommonJS 風(fēng)格來引入需要的模塊。
首先安裝這些模塊：
npm install --save es5-shim console-polyfill
然后把以下代碼插入到入口文件的最前面：
require('es5-shim');
require('es5-shim/es5-sham');
require('console-polyfill');
參考一個真實(shí)的例子: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 的解決過程
錯誤：調(diào)用接口數(shù)據(jù)沒有返回，傳輸了中文
原因：這個一般表現(xiàn)為在chrome瀏覽器上頁面可以正常顯示，而在ie10上面卻不行，可以檢查一下接口傳輸?shù)臄?shù)據(jù)是否傳輸了中文。如果傳輸了中文，那么就需要進(jìn)行轉(zhuǎn)碼。
解決方案：可以通過encodeURIComponent()或者encodeURI()來進(jìn)行轉(zhuǎn)碼。
示例：沒有，自己百度。
錯誤：為適配ie10瀏覽器，不可以這樣寫
錯誤的寫法：
class Person extends React.Component {
state = {
name:this.props.name
};
}
或者
constructor(props) {
super(props);
// SCRIPT5007: 無法獲取屬性 "b" 的值，對象為 null 或未定義
this.a = this.props.b;
}
原因：在構(gòu)造函數(shù)里不能使用 this.props.xx
解決方案：改為正統(tǒng)寫法,不用this.props.xxx，使用繼承的props
class Person extends React.Component {
constructor(props){
super(props)
this.state = {
name:props.name
};
}
}
錯誤：無法獲取屬性 xxx 的值，對象為 null 或未定義
原因：這種情況一般是組件繼承后，無法繼承到在構(gòu)造函數(shù)里定義的屬性或方法，同樣類屬性或方法也同樣無法繼承。
解決方案：使用babel-preset-es2015-ie
安裝：
npm install --save-dev babel-preset-es2015-ie
然后在.babelrc文件中添加：
{
"presets": ["es2015-ie"]
}
參考：React+Webpack+Antd+Babel 兼容低版本瀏覽器
IE 瀏覽器滾動條無法滑動或者按鈕無法點(diǎn)擊或者其他的事件無法響應(yīng)，都可以參考這一條
原因：IE10或者更低版本在解析html的時候，用的是盒模型，如果發(fā)現(xiàn)無法點(diǎn)擊或者無法滑動的時候，通過查看元素來確認(rèn)是否有遮罩，從而造成點(diǎn)擊事件無法傳遞到下面。
解決方案：在遮罩的下一層布局添加如下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 的瀏覽器兼容性問題
