我有以下情况,我事先不知道要加载哪个组件。使用 React.lazy 的解决方案如下
import React, { lazy, Suspense } from "react";
export default class CallingLazyComponents extends React.Component {
render() {
var ComponentToLazyLoad = null;
if(this.props.name == "A") {
ComponentToLazyLoad = lazy(() => import("./AComponent"));
} else if(this.props.name == "B") {
ComponentToLazyLoad = lazy(() => import("./BComponent"));
}
return (
<div>
<h1>This is the Base User: {this.state.name}</h1>
<Suspense fallback={<div>Loading...</div>}>
<ComponentToLazyLoad />
</Suspense>
</div>
)
}
}
如何使用可加载组件实现相同的目标