2 sposoby wykorzystania zewnętrznego skryptu w projekcie React.
Wiele razy chcemy użyć zewnętrznego skryptu w naszej aplikacji React. którego nie można zainstalować do npm lub yarn albo mamy skrypt dostępny lokalnie lub za pośrednictwem CDN. Oto, jak możesz łatwo użyć go w swojej aplikacji React.
Załóżmy, że masz your-script.js skrypt zewnętrzny.
I chcesz go używać w swojej aplikacji React. Przede wszystkim umieść go w następującej lokalizacji (będziesz musiał utworzyć foldery assets i js w katalogu public)
public/assets/js/your-script.js
Teraz można go załadować na 2 sposoby
Bezpośrednie ładowanie
Otwórz public/index.html i dodaj znacznik script nad znacznikiem title.
... <script type=”text/javascript” src=”./assets/js/your-script.js”></script> <title>React App</title> ...
i jesteś skończony.
Teraz możesz używać funkcji z zewnętrznego skryptu. Nie możesz ich bezpośrednio używać. musisz do nich zadzwonić za pomocą window
Załóżmy, że w skrypcie zewnętrznym znajduje się funkcja o nazwie helloLife. możesz to tak nazwać w swoich komponentach React.
window.helloLife();
Wadą tego podejścia jest to, że możemy nie potrzebować tego skryptu w całej naszej aplikacji React. ale niepotrzebnie ładujemy go przy każdym uruchomieniu aplikacji.
Ładowanie na żądanie
Krok 1. Zainstaluj komponent react-load-script
npm install react-load-script --save
Możesz załadować your-script.js na żądanie do swojego komponentu React w ten sposób.
Chcesz go użyć w komponencie Demo
Pamiętaj, że będziesz musiał wywołać funkcje ze swojego zewnętrznego skryptu za pomocą window ( window.yourFunction(); )
Uwaga: w przypadku skryptu src możesz podać ścieżkę lokalną lub adres URL CDN.
Mam nadzieję, że podróż Ci się podobała.
Śledź mnie na Github
