Динамический импорт из url в react компоненте?

Question

[Раиль Хуснутдинов]

Стоит задача подключить библиотеку для оплаты YandexCheckout.js. Подключить библиотеку можно только через CDN. Поскольку она нужна будет только если клиент захочет оплатить, хотелось бы подключать её динамически при монтировании компонента в componentDidMount, а не вставлять в конец файла index.html как .
Есть динамический импорт для локальной библиотеки:
import('axios').then(() => {}), но она не работает с url.
В данный момент пока склоняюсь к подключении библиотеки Systemjs, она вроде бы умеет импортировать из url.
Есть ли другие варианты?

Дополнение:
Ищу способ использовать именно без DOM, чтобы можно было бы использовать и в react-native.
Так же видел ответы в stackoverflow:
https://stackoverflow.com/questions/44877904/how-d...
https://stackoverflow.com/questions/36103641/dynam...
https://stackoverflow.com/questions/34607252/es6-i...

Comments

[Роман Александрович]

а что вам мешает по клику написать код
document.body.innerHTML += 'ваш CDN';

[Раиль Хуснутдинов]

Да, можно, но хотелось бы сделать это без dom, например, чтобы можно было пользоваться библиотекой в react-native тоже. Дополню вопрос.

Answer 1

[davidnum95]

В порядке бреда:

componentDidMount = () => {
  const script = document.createElement('script');
  script.src='https://www.cdn.com/YandexCheckout.js';
  script.type = "text/javascript";
  script.id = "yandexCheckout";
  document.head.appendChild(script);
}

componentWillUnmount = () => {
 const script = document.getElementById("yandexCheckout");
 script.parentNode.removeChild(script)
}

Дополнение:
Ищу способ использовать именно без DOM, чтобы можно было бы использовать и в react-native.

Ну можно через eval попробовать