站長(zhǎng)資訊網(wǎng)
react引入外部方法的方法：1、通過import引入外部方法；2、通過react中的生命周期來引入外部方法，代碼如“componentDidMount(){let scriptSrc = ['/config/jquery.min.js', '/config/lib/codemirror.js']scriptSrc.map(res => {…}”。
本教程操作環(huán)境：Windows10系統(tǒng)、react18.0.0版、Dell G3電腦。
react怎么引入外部方法？
記錄react引入外部功能js問題
在做react項(xiàng)目時(shí)，有的時(shí)候需要引用其他原生js模塊（也就是方法）
如果該js內(nèi)是通過es6的export default導(dǎo)出的則在jsx中可以通過import引入；
但如果該js只是一個(gè)方法也沒有通過es6等導(dǎo)出必須通過script引入；
例如我寫了一個(gè)原生js或著在一個(gè)js中通過jquery來操作節(jié)點(diǎn)返回值也就是當(dāng)點(diǎn)擊頁面元素時(shí)觸發(fā)原生事件，則在jsx中不可通過import引入
引入該js有兩種方法
1.如果在你的react框架中的html中引入
2.也可在jsx中通過react的中的生命周期來引入
例如
componentDidMount() { // 要引入的js文件地址 let scriptSrc = ['/config/jquery.min.js', '/config/lib/codemirror.js'] scriptSrc.map(res => { // 動(dòng)態(tài)創(chuàng)建script標(biāo)簽 var script = document.createElement('script'); // 規(guī)則 script.type = "text/javascript" // script中src只想路徑 script.src = res; // 追加到html的head頭中 document.head.appendChild(script); }) var script = document.createElement('script') script.type = 'text/javascript' script.src = '/config/show-hint.js' // 追加到html中body的內(nèi) document.body.append(script) var script = document.createElement('script'); script.type = "text/javascript" script.src = '/config/formula.js'; // 追加到html中body的內(nèi) document.body.append(script); }
需要引入進(jìn)去幾個(gè)js，就需要?jiǎng)討B(tài)創(chuàng)建幾個(gè)script標(biāo)簽，不然后者會(huì)將前者覆蓋
將js添加到頭的話是因?yàn)?/p>
必須等到全部的js代碼都下載解析和執(zhí)行完成以后，才開始展現(xiàn)頁面內(nèi)容
引入的時(shí)候有個(gè)坑
在html中script引入js的話他的js地址為
http://http://localhost:端口號(hào)/你的js名稱
也就是指瀏覽器找尋的js地址是你項(xiàng)目中public中的文件也就是靜態(tài)資源下的文件，所以我們需要將js放入public（靜態(tài)資源目錄下）引入的話直接/你的路徑。
推薦學(xué)習(xí)：《react視頻教程》
