實現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