团队讨论react-ie8时,我会先把用途说清楚:让您的 React 应用程序在 IE8 中运行。这类界面与前端开发工具真正难在视觉还原、交互状态和响应式细节容易遗漏,仓库说明只能作为第一层证据。与其反复读介绍,不如选一个包含多状态的真实组件完成实现,再依据尺寸、状态、可访问性、资源和不同视口表现做取舍。我的判断是,它更适合愿意逐状态验收界面质量的前端团队;若眼下没有这类需求,先保留观察即可。
中文 README
让您的 React 应用程序在 IE8 中运行
这真是一个令人沮丧的消息[从React v15开始,我们将停止React DOM对IE 8的支持][停止React IE 8对DOM的支持]。 中国仍有超过18%的人在使用IE8。
不管怎样,
react-ie8将持续为面临同样兼容问题的人们提供一系列的[示例],并收集问题。享受
react-ie8[示例] 的乐趣,并随时 [打开问题]。
如何
首先你不应该再使用 React v15 或更高版本。只需使用 React v0.14 即可,它仍然支持 IE8。
如果您需要 React v0.14 的文档,请转到 http://react-ie8.xcatliu.com
使用CommonJS
我强烈建议使用 CommonJS 样式来包含所需的包。
首先安装这些软件包:
npm install --save es5-shim console-polyfill
然后将代码插入到条目文件的开头:
require('es5-shim');
require('es5-shim/es5-sham');
require('console-polyfill');
有关真实示例,请参阅React IE8 Hello World 示例。
反应静态样板
React Static Boilerplate 一个支持 IE8 的 React 静态样板,查看 Demo
其他问题
有些问题其实并不是React的问题,但我也列出如下:
| 错误信息 | 原因 | 解决方案 | 相关问题 | 示例 |
|---|---|---|---|---|
Expected identifier |
您的代码或第三方包中使用了保留字,例如 default |
使用 [es3ify] 或 [es3ify-loader] 转换您的代码 | [#1] | [获取IE8] |
Exception thrown and not caught |
Babel 将您的 export * from 'xxx' 转换为 Object.defineProperty,它不支持 IE8 中的访问器属性 |
在条目文件顶部插入 require('es5-shim') require('es5-shim/es5-sham'),并且 DONOT 在代码中使用 export * from 'xxx' |
[#2][#2] [#32][#32] | [你好世界] |
Object expected |
也许您正在使用 fetch 而不使用 polyfilled |
使用 es6-promise 和 fetch-ie8 来填充 fetch |
[#4] | [获取IE8] |
'Promise' is undefined |
Promise 需要在 IE8 中进行聚合填充 |
使用 es6-promise 来填充 Promise |
[#5] | [获取IE8] |
Object doesn't support this property or method |
也许您正在使用 Object.assign |
使用core-js进行polyfill |
[#7] | [对象分配] |
'JSON' is undefined |
需要使用IE8标准模式 | 添加 <!DOCTYPE html> 和 <meta http-equiv="X-UA-Compatible" content="IE=EDGE"/> |
[#8] | [你好世界] |
如果您还有其他问题,请[打开问题]。
故障排除
[问题排查][问题排查]
参考
使你的 React 应用兼容 IE8
一个令人失望的消息:[从 React v15 开始,React DOM 将不会再支持 IE8 了][React IE 8 支持停止 DOM]。而[中国还有超过 18% 的人在使用IE8][IE8-in-中国]。
不管怎样,
react-ie8仍会提供一系列的[示例][示例],还会收集问题,以便于给遇到兼容性问题的人一个参考。快去查看
react-ie8[示例][示例]吧,也欢迎[提交问题][打开一个问题]。
如何兼容 IE8
首先,你不应该使用 React v15 或更高版本。使用仍然支持 IE8 的 React v0.14 即可。
如果您需要查看 React v0.14 的文档,请访问:http://react-ie8.xcatliu.com
使用 CommonJS
强烈推荐使用 CommonJS 风格来引入需要的模块。
首先安装这些模块:
npm install --save es5-shim console-polyfill
然后把以下代码插入到入口文件最前面:
require('es5-shim');
require('es5-shim/es5-sham');
require('console-polyfill');
参考一个真实的例子:React IE8 Hello World Example。
使用 React 静态样板
React Static Boilerplate 一个创建好的支持 IE8 的 React 静态模板,可以查看 演示
其他问题
一些问题其实并不是 React 的问题,不过我也把他们列出来了:
| 错误信息 | 原因 | 解决方案 | 相关问题 | 示例 |
|---|---|---|---|---|
Expected identifier |
代码中或者第三方模块中使用了保留字,比如 default |
使用 [es3ify] 或者 [es3ify-loader] | [#1] | [获取IE8] |
Exception thrown and not caught |
babel 把 export * from 'xxx' 编译编译为 Object.defineProperty,而 IE8 中不支持 accessor 属性 |
把 require('es5-shim') require('es5-shim/es5-sham') 插入到入口文件的最上方,并且在代码中不要使用 export * from 'xxx' |
[#2][#2] [#32][#32] | [你好世界] |
Object expected |
可能你使用了 fetch |
使用 es6-promise 和 fetch-ie8 填充材料 |
[#4] | [获取IE8] |
'Promise' is undefined |
Promise 需要填充 |
使用 es6-promise 填充材料 |
[#5] | [获取IE8] |
Object doesn't support this property or method |
可能你使用了 Object.assign |
使用 core-js 填充材料 |
[#7] | [对象分配] |
'JSON' is undefined |
需要使用IE8标准模式 | 添加 <!DOCTYPE html> 和 <meta http-equiv="X-UA-Compatible" content="IE=EDGE"/> |
[#8] | [你好世界] |
如果您遇到其他问题,可以[提交一个问题][打开一个问题]。
故障排除
[问题排查][问题排查]
参考