2 способа использования внешнего скрипта в вашем проекте React.
Часто мы хотим использовать какой-нибудь внешний скрипт с нашим приложением React. которые нельзя установить с помощью npm или yarn, либо у нас есть сценарий, доступный локально или через CDN. Вот как вы можете легко использовать его в своем приложении React.
Предположим, у вас есть your-script.js внешний скрипт.
И вы хотите использовать его в своем приложении React. Прежде всего, поместите его в следующее место (вам нужно будет создать папки assets и js в public директории)
public/assets/js/your-script.js
Теперь есть 2 способа загрузить его
Прямая загрузка
Откройте public/index.html и добавьте тег script над тегом title.
... <script type=”text/javascript” src=”./assets/js/your-script.js”></script> <title>React App</title> ...
и вы сделали.
Теперь вы можете использовать функции из внешнего скрипта. Вы не можете использовать их напрямую. тебе нужно будет позвонить им с window
Предположим, в вашем внешнем скрипте есть имя функции helloLife. вы можете называть это так в своих компонентах React.
window.helloLife();
Недостатком такого подхода является то, что нам может не понадобиться этот скрипт повсюду в нашем приложении React. но мы без необходимости загружаем его каждый раз при запуске приложения.
Загрузка по запросу
Шаг 1. Установите компонент react-load-script
npm install react-load-script --save
Вы можете загрузить your-script.js по запросу в свой компонент React следующим образом.
Вы хотите использовать его в Demo компоненте
Помните, что вам нужно будет вызывать функции из внешнего скрипта с window (window.yourFunction();)
Примечание: для скрипта src вы можете указать свой локальный путь или URL-адрес CDN.
Надеюсь, вам понравилось путешествие.
Следуйте за мной на Github
