实现react路由动态加载的组件


import React, { Component } from 'react';
import Loading from '../../base/nc_Loading';
/*
* date: 2018/06/28
* asyn load components
* useage: const newcom = asyncComponent(() => import(/ * webpackChunkName: "chunkname" * / 'pages/so/edit'));
*/
export default function asyncComponent(importComponent) {
class AsyncComponent extends Component {
constructor(props) {
super(props);
this.state = {
component: null,
};
}
componentDidMount() {
this.asyncGetComponent();
}
asyncGetComponent = () => {
const self = this;
new Promise((resolve) => {
const asyncCom = importComponent();
resolve(asyncCom);
}).then((asyncCom) => {
const { default: component } = asyncCom;
self.setState({
component,
});
});
}
render() {
const C = this.state.component;
return C ? <C {...this.props} /> : <Loading text="正在加载中..." />;
}
}
return AsyncComponent;
}


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM