React loyihangiz bilan tashqi skriptdan foydalanishning 2 usuli.

Ko'pincha biz React ilovamiz bilan tashqi skriptdan foydalanmoqchimiz. npm yoki yarn tomonidan o'rnatilmaydi yoki bizda mahalliy yoki CDN orqali skript mavjud. React ilovasida undan qanday qilib osongina foydalanishingiz mumkin.

Tasavvur qiling, sizda your-script.js tashqi skript bor.

Va siz uni React ilovangizda ishlatmoqchisiz. Avvalo, uni quyidagi joyga qo'ying (siz public direktda assets va js jildi yaratishingiz kerak bo'ladi)

public/assets/js/your-script.js

Endi uni yuklashning 2 usuli bor

To'g'ridan-to'g'ri yuklash

public/index.html ni oching va title tegining ustiga script teg qo'shing.

...
<script type=”text/javascript” src=”./assets/js/your-script.js”></script>
<title>React App</title>
...

va siz tugatdingiz.

Endi siz tashqi skriptingizdagi funksiyalardan foydalanishingiz mumkin. Siz ulardan bevosita foydalana olmaysiz. ularga window bilan qo'ng'iroq qilishingiz kerak bo'ladi

Tashqi skriptingizda helloLife funksiya nomi bor deylik. Siz buni React Components-da shunday deb atashingiz mumkin.

window.helloLife();

Yondashuvning kamchiligi shundaki, bu skript bizning React ilovamizda hamma joyda kerak emas. lekin biz uni har safar ishga tushganda keraksiz yuklaymiz.

Talab bo'yicha yuklash

1-qadam. react-load-script komponentini o'rnating

npm install react-load-script --save

your-script.js ni React komponentingizga shu tarzda yuklashingiz mumkin.

Siz uni Demo komponentida ishlatmoqchisiz

Tashqi skriptingizdagi funksiyalarni window ( window.yourFunction();) bilan chaqirishingiz kerakligini unutmang.

Eslatma: src skripti uchun mahalliy yoʻlingiz yoki CDN URL manzilingiz boʻlishi mumkin.

Sayohat sizga yoqdi degan umiddaman.

Meni Github da kuzatib boring