javascript - 有条件地从另一个组件导入组件的最佳方法是什么？

Question

所以，问题是，我有一个组件 A，它应该根据某些条件渲染组件 B。我可以在顶部导入 B，一切都会好起来的，但是如果不满足条件，我不想以所有 B 的组件代码都不需要它而告终。我的做法是:

let B;
if (condition) { B = require('./B.js' }

这有意义吗？谢谢。

问题是我收到“元素类型无效:应为字符串”错误。

Edit1:我正在使用 create-react-app

Edit2:解决方案:

let comp;
if(condition) { comp = require('./SomeComponent').default; }

Answer 1

如果您使用的是 Webpack，则可以执行动态导入，同时将该导入与组件代码分开捆绑。

const B = condition && import(/* webpackMode: "lazy-once" */ './b.js')

否则你可以简单地使用动态导入:

const B = condition && import('./b.js')