条件组件导入ReactJS

Question

我目前正在构建一个ReactJS项目，该项目有免费/pro版本。在免费版本中，当组件存在时，我需要有条件地导入它。组件文件仅在安装专业版本时存在(专业版本文件夹存在(。

我试图使用lazy和Suspense来实现这一点，但编译器抛出了一个错误；没有这样的文件或目录"；在这种情况下，当由于组件文件不存在而未安装pro版本时。

getPROComponent() {
const ProComponent = lazy(() => import('./ProComponent'))
return (
<Suspense fallback={<div></div>}>
<ProComponent label={this.state.label} checked={this.state.checked} onCheck={this.onCheck} />
</Suspense>
);
}
render() {
const { isPRO } = this.state

return (
! isPRO ? <h1>Free Version</h1> : this.getPROComponent
)
}

我有什么办法做到这一点吗？

Answer 1

• 对组件(或模块(使用延迟加载。始终将其作为构建的一部分生成
• 使用配置文件隐藏或显示组件
• 在构建完成后删除包含专业内容的区块