详解React项目中碰到的IE问题

 更新时间:2019年03月14日 14:20:29   作者:小闲  
这篇文章主要介绍了React项目中碰到的IE问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

最近接手一个React项目,在IE下碰到了俩问题

IE11报错如下:

跟踪一下之后,发现是一些其他的npm包里面用到了startsWith这个方法,可以自己polyfill一下:

if (!String.prototype.startsWith) {
 String.prototype.startsWith = function (search, pos) {
 return this.substr(!pos || pos < 0 ? 0 : +pos, search.length) === search
 }
}

不过加prototype的方法毕竟不好,可以通过引入@babel/polyfill解决,在入口文件中引入import '@babel/polyfill';

IE11问题解决后,IE10又出问题了。。。

犯了stackoverflow和github的很多帖子之后,在这个帖子里找到,发现是Object.setPrototypeOf的问题,Object.setPrototypeOf说是支持了IE9-11, 实际在源码里只实现了11+(https://github.com/paulmillr/es6-shim/blame/master/README.md#L78)

解决办法可以是在polyfill url后加上excludes=Object.setPrototypeOf, 或者自己实现Object.setPrototypeOf方法,我这里引入了一个库setprototypeof,然后在入口文件中加上Object.setPrototypeOf = require('setprototypeof');

其实这个库里的实现代码非常少, 可以简单看下

'use strict'
/* eslint no-proto: 0 */
module.exports = Object.setPrototypeOf || ({ __proto__: [] } instanceof Array ? setProtoOf : mixinProperties)

function setProtoOf (obj, proto) {
 obj.__proto__ = proto
 return obj
}

function mixinProperties (obj, proto) {
 for (var prop in proto) {
 if (!obj.hasOwnProperty(prop)) {
  obj[prop] = proto[prop]
 }
 }
 return obj
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • ReactQuery系列之数据转换示例详解

    ReactQuery系列之数据转换示例详解

    这篇文章主要为大家介绍了ReactQuery系列之数据转换示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • React Refs 的使用forwardRef 源码示例解析

    React Refs 的使用forwardRef 源码示例解析

    这篇文章主要为大家介绍了React 之 Refs 的使用和 forwardRef 的源码解读,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • React中项目路由配置与跳转方法详解

    React中项目路由配置与跳转方法详解

    这篇文章主要为大家详细介绍了React中项目路由配置与跳转方法的相关资料,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以了解一下
    2023-08-08
  • React手稿之 React-Saga的详解

    React手稿之 React-Saga的详解

    这篇文章主要介绍了React手稿之 React-Saga的详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 最新版React Native环境搭建(亲测)

    最新版React Native环境搭建(亲测)

    这篇文章主要介绍了最新版React Native环境搭建,React Native的运行需要依赖原生Android和iOS环境,因此需要分别安装原生Android和iOS的开发环境,本文给大家介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • React Hook 父子组件相互调用函数方式

    React Hook 父子组件相互调用函数方式

    这篇文章主要介绍了React Hook 父子组件相互调用函数方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 浅谈React前后端同构防止重复渲染

    浅谈React前后端同构防止重复渲染

    这篇文章主要介绍了浅谈React前后端同构防止重复渲染,首先解释React前后端同构、React首屏渲染的概念。然后通过这2个概念解决服务端渲染完成后浏览器端重复渲染的问题。有兴趣的可以了解一下
    2018-01-01
  • React代码分割的实现方法介绍

    React代码分割的实现方法介绍

    虽然一直有做react相关的优化,按需加载、dll 分离、服务端渲染,但是从来没有从路由代码分割这一块入手过,所以下面这篇文章主要给大家介绍了关于React中代码分割的方式,需要的朋友可以参考下
    2022-12-12
  • ahooks useVirtualList 封装虚拟滚动列表

    ahooks useVirtualList 封装虚拟滚动列表

    这篇文章主要为大家介绍了ahooks useVirtualList 封装虚拟滚动列表详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • npx create-react-app xxx创建项目报错的解决办法

    npx create-react-app xxx创建项目报错的解决办法

    这篇文章主要介绍了npx create-react-app xxx创建项目报错的解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02

最新评论