react浏览器兼容报错处理

IE11以下浏览器报错

1.在低版本的谷歌浏览器和ie11浏览器以下页面变成空白。以及下图报错

解决方法：

（1）先安装babel-polyfill依赖，npm install babel-polyfill --save

（2）安装好之后在配置文件webpack.config.dev.js中引入polyfills.js。如下图，下图为多入口文件（多页）配置的引入方式。

单入口（单页）文件配置如下图所示

（3）在入口文件中导入babel-polyfill，即 import 'babel-polyfill'。注意：在单页应用中只需在最终的入口文件中导入即可，在多页应用中每一个入口文件都要导入。实例如下图。

（4）参考链接：https://blog.youkuaiyun.com/roamingcode/article/details/81975858

2.在ie10及以下报下图错误

报错原因：是在constructor构造函数的this.state中初始变量的时候使用了this，因为super(props)中只传了props，这里在低版本浏览器情况下会报错。具体原因参考：https://segmentfault.com/a/1190000011352429。

解决方法：

将this.state中的变量改成如下图的形式。

3.从IE9浏览器开始页面布局发生了变化。

问题原因：使用了flex布局。flex布局对于IE10以下的浏览器无法兼容。参考链接：https://www.cnblogs.com/yangjie-space/p/4856109.html及https://www.jb51.net/css/522283.html

以上报错均是在项目开发处理低版本谷歌浏览器和IE浏览器兼容上面遇到的错误以及处理的方法。下面给大家分享一些处理浏览器兼容的链接。

react处理兼容到IE8浏览器方法链接：

http://react-china.org/t/reactjs-ie8/1364

https://github.com/xcatliu/react-ie8

https://www.cnblogs.com/godghdai/p/7659033.html

https://segmentfault.com/q/1010000005889716/a-1020000005889882