AsyncComponent.js
2.0 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import React from 'react'
import Loadable from 'react-loadable';
import Spinner from 'react-spinkit';
const MyLoadingComponent = ({ pastDelay, error, retry }) => {
// 加载中
if (pastDelay) {
return (<div style={{ height: '100%', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: '999', position: 'fixed', top: '0px', left: '130px' }}>
<div style={{ display: 'inline-block', marginTop: '-80px' }}><Spinner name="line-spin-fade-loader" /></div>
<div style={{ marginLeft: '-30px' }}>页面加载中...</div>
</div>)
}
// 加载出错
else if (error) {
return (<div style={{ height: '100%', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: '999', position: 'fixed', top: '0px', left: '130px' }}>
<div>加载页面失败，点击<a onClick={() => {
location.reload();
}}>重新加载</a></div>
</div>);
}
else {
return null
}
}
const AsyncComponent = loadComponent => (
Loadable({
loader: loadComponent,
loading: MyLoadingComponent
})
);
// const AsyncComponent = loadComponent => (
// class AsyncComponent extends React.Component {
// state = {
// Component: null,
// }
// componentWillMount() {
// if (this.hasLoadedComponent()) {
// return;
// }
// loadComponent()
// .then(module => {
// if(module&&module.default){
// return module.default
// }else{
// return module
// }
// })
// .then((Component) => {
// this.setState({Component});
// })
// .catch((err) => {
// console.error(`Cannot load component in <AsyncComponent />`);
// throw err;
// });
// }
// hasLoadedComponent() {
// return this.state.Component !== null;
// }
// render() {
// const {Component} = this.state;
// return (Component) ? <Component {...this.props} /> : null;
// }
// }
// );
export default AsyncComponent;