Ant Design Pro 兼容性问题

支持环境:现代浏览器和 IE9 及以上(需要 polyfills)。

一:组件
1.Flex 布局 现代浏览器支持
Ant Design Pro 兼容性问题_第1张图片

2.Upload 上传
beforeUpload:上传文件之前的钩子,参数为上传的文件,若返回 false 则停止上传。支持返回一个 Promise 对象,Promise 对象 reject 时则停止上传,resolve 时开始上传。注意:IE9 不支持该方法。
headers:设置上传的请求头部,IE10 以上有效。
multiple:是否支持多选文件,ie10+ 支持。开启后按住 ctrl 可选择多个文件。
Ant Design Pro 兼容性问题_第2张图片

3.IE9不能支持FormData和文件(File)接口
项目使用的组件库是Antd,Antd提供了一系列功能丰富的控件。是我们无需把页面控件包含到Form中,我们通过Redux来管理页面控件的状态,点击提交按钮时,通过FormData来构造“模拟表单“键值对进行异步提交。
Ant Design Pro 兼容性问题_第3张图片
如果不用FormData,Ajax就无法提交文件内容,哪怕浏览器支持File接口。FormData作为一个协议,也不存在什么Polyfill。那么能做的也只能是用最原始的form表单提交方法了。最原始的表单提交的最大问题就是会刷新页面,这意味着待提交页面上由Redux保管的state全部会被冲掉,这显然是不行的,很多提交表单后的业务逻辑会无以为继。

解决方法:
jquery-form: 这个库可以帮助我们将原生的html from提交过程ajax化。(通过源码可以得知本质上还是过将form表单的target指向隐藏的iframe来实现页面中表单的无刷新提交,由iframe的’load’事件callback来处理后续逻辑)
Ant Design Pro 兼容性问题_第4张图片
为每个表单控件创建一个Hidden Input,value值绑定state。这样做的好处是我们不用去维护页面中的state,还是交与Redux去处理,我们只需绑定好终值就可以了。
Ant Design Pro 兼容性问题_第5张图片

4.IE9不能识别application/json
这个引发的主要问题是,IE9如果收到content-type为application/json的response,因为无法识别,因此会把他当成一个待下载文件处理,从而导致app无法接收并处理这个response。

解决方法:
在后台将response的content-type设置为text/plain。前端注意的就是会接收到string类型的数据,需要用JSON.parse(res)转化成数据格式。

5.IE9不支持以e.target.value的方式取Dom组件的value值
e.target.value是从IE10开始支持的,所幸IE9中有e.currentTarget.value还可以取得正确的值。
Ant Design Pro 兼容性问题_第6张图片
以上代码需要注意的是,我们项目中用的是antd的控件,而e.target.value的获取在控件源代码中,还好,antd的Form表单提供了一个option: getValueFromEvent,我们可以在这里修改input事件产生的event对象。

6.IE9不支持很多CSS3特性,比如animation

7.IE9不支持H5 Input控件(如select, email etc..)

8.在设置滚动条overflow的情况下,不断滚动会导致底部出现大片空白(chrome, firefox无此类问题)

解决方法:
来自google,在设置overflow的地方加一个’min-height: 0%;’

9.IE9下React不支持BrowserRouter,支持HashRouter
BrowserRouter底层需要调用H5中增加的history.pushstate等新函数。
history MDN
import {HashRouter as Router, Route, Switch, Redirect} from ‘react-router-dom’ ;

你可能感兴趣的:(Ant,Design,Pro)