因为使用的import函数,所以需要在babel中引入一个插件
npm i babel-plugin-import -D
import React, { Component } from 'react';
// importComponent 是使用 import()的函数
export default function asyncComponent(importComponent) {
class AsyncComponent extends Component {
constructor(props) {
super(props);
this.state = {
component: null //动态加载的组件
}
}
componentDidMount() {
importComponent().then((mod) => {
this.setState({
// 同时兼容 ES6 和 CommonJS 的模块
component: mod.default ? mod.default : mod
});
})
}
render() {
// 渲染动态加载组件
const C = this.state.component;
return C ? <C {...this.props}></C> : null
}
}
return AsyncComponent;
}
使用:
const Home = asyncComponent(() => import("./page/Home"));