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

Question

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

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

这有道理吗？谢谢。

问题是我收到“元素类型无效：需要字符串”错误。

编辑1：我正在使用 create-react-app

编辑2：解决方案：

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

Answer 1

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

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

否则，您可以简单地使用动态导入：

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