Каков наилучший способ условного импорта компонента из другого компонента?

Question

Итак, проблема в том, что у меня есть компонент A, который должен визуализировать компонент B в соответствии с некоторым условием.Я мог бы импортировать B вверху, и все будет хорошо, но если условие не будет выполнено, я не хочу, чтобы весь код компонента B не нуждался в нем.Я делаю так:

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

Имеет ли это смысл?Спасибо.

Проблема в том, что я получаю сообщение об ошибке "Тип элемента недопустим: ожидается строка".

Edit1: я использую приложение create-реакции-приложение Edit2: Solution: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 })
}