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

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; } 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')

Answer 2

你可以尝试动态导入吗？ 虽然它需要使用babel / es6 + https://github.com/airbnb/babel-plugin-dynamic-import-node#usage

if(x) {
 import('./B.js').then(B => this.setState({ B })
}