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

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

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

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

Answer 2

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

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

否则您只需使用动态导入：

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