React+Webpack+ES6兼容低版本浏览器（IE9）的解决方法

时间：2023-04-02 16:42:23 HTML

虽然IE6兼容的噩梦时代已经过去，但IE依然阴魂不散，因为你可能还在兼容IE9。在ES6流行的今天，用ES6写React已经成为了标配。但是babel编译出来的js语法，由于一些不规范的写法，在IE9下可能无法正确解释，很容易导致白屏。本文记录以下原因。备考那天，我打开IE9看了一下（注意这是原来的IE9，不是IE11模拟的IE9），天啊！经过排查，发现在构造函数中使用了这个。简写如下classChildextendsReact.Component{constructor(props){super(props);this.state={count:this.props.count}}render(){return(

child

)}}classSupererextendsReact.Component{state={count:1}render(){return}}老司机肯定一眼就看出问题所在：this.state={count:this.props.count}构造函数中不应该使用this，但是porps由super(props)传入，应该改为this.state={count:props.count}。改正后，问题确实解决了。但问题来了。虽然写法确实不规范，但为什么其他浏览器运行正常，包括IE11，用IE11模拟iE9没有问题，但是用IE9原版就出问题了。怎么会这么模糊，哼！原因是浏览器运行的代码既然是babel编译的，那么就先把责任推到babel身上。看一下babel编译的源码。如下"usestrict";var_createClass=function(){functiondefineProperties(target,props){for(vari=0;i

上一篇：访谈：应用软件定制有哪些优势？

下一篇：CSShtml大杂烩

React+Webpack+ES6兼容低版本浏览器（IE9）的解决方法相关文章