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'。注意:在单页应用中只需在最终的入口文件中导入即可,在多页应用中每一个入口文件都要导入。实例如下图。

react浏览器兼容报错处理_第1张图片

(4)参考链接:https://blog.csdn.net/roamingcode/article/details/81975858

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

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

react浏览器兼容报错处理_第2张图片

解决方法:

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

react浏览器兼容报错处理_第3张图片

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

 

 

 

 

你可能感兴趣的:(react)