Условный импорт компонентов в приложение React

Я использую fetch-mock, чтобы имитировать фактический компонент, который использует выборку. fetch-mock не поддерживает ie11 и хотел бы импортировать компонент из примера только в том случае, если поддерживается браузер. Как я могу этого добиться?

  1. ABCExampleComponent использует fetch-mock для имитации fetch, используемого в ABCComponent.
  2. LoadComponent должен отображать ABCExampleComponent только в том случае, если браузер поддерживается.

LoadComponent

const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
if (!isIE11){
  import ABCExampleComponent from './ABCExampleComponent';
}

//or
const ABCExampleComponent = !isIE11 ? import('./ABCExampleComponent') : null;

const LoadComponent = ( ) => {
  <ABCExampleComponent />
}

Спасибо за предложения.

Какую версию React вы используете? Вариант v16.6?

dance2die 07.11.2018 20:47
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
1
58
1

Ответы 1

Я не знаю, полностью ли я понимаю ваш вопрос, но попробуйте это const Abc = condition ? require('ComponentA') : require('componentB')

Я предполагаю, что webpacker сначала ищет все импортированные / требуемые данные, прежде чем я выполню условную проверку, так что это не сработает. Но спасибо за предложение

Mad-D 08.11.2018 18:41

Другие вопросы по теме