[英]React.lazy pattern using Loadable Components
I have the following scenario where I don't know ahead of time which component to load.我有以下情况,我事先不知道要加载哪个组件。 The solution of which is as follows using React.lazy使用 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>
)
}
}
How can I achieve the same using Loadable Components如何使用可加载组件实现相同的目标
I believe the best solution to your problem is to keep using React.lazy as is recommended by the author of loadable-components since "it is not maintained any more and it is not compatible with Webpack v4+ and Babel v7+"我相信解决问题的最佳方法是按照 loadable-components 的作者的建议继续使用 React.lazy,因为“它不再维护,并且与 Webpack v4+ 和 Babel v7+ 不兼容”
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.