首頁  >  文章  >  web前端  >  react怎麼引入外部方法

react怎麼引入外部方法

藏色散人
藏色散人原創
2023-01-19 11:10:022007瀏覽

react引入外部方法的方法:1、透過import引入外部方法;2、透過react中的生命週期來引入外部方法,程式碼如「componentDidMount(){let scriptSrc = ['/config/jquery .min.js', '/config/lib/codemirror.js']scriptSrc.map(res => {...}」。

react怎麼引入外部方法

##本教學操作環境:Windows10系統、react18.0.0版、Dell G3電腦。

react怎麼引進外部方法?

##記錄react引入外部功能js問題

在做react專案時,有的時候需要引用其他原生js模組(也就是方法)

如果該js內是透過es6的export default導出的則在jsx中可以透過import引入;

但如果該js只是一個方法也沒有透過es6等導出必須透過script引入;

#例如我寫了一個原生js或著在一個js中透過jquery來操作節點回傳值也就是當點擊頁面元素時觸發原生事件,則在jsx中不可透過import引入

引入該js有兩種方法

1.如果在你的react框架中的html中引入

2.也可在jsx中透過react的中的生命週期來引入

例如

   componentDidMount() {
        // 要引入的js文件地址
        let scriptSrc = ['/config/jquery.min.js', '/config/lib/codemirror.js']
        scriptSrc.map(res => {
            // 动态创建script标签
            var script = document.createElement('script');
            // 规则
            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的内
        document.body.append(script)
        var script = document.createElement('script');
        script.type = "text/javascript"
        script.src = '/config/formula.js';
        // 追加到html中body的内
        document.body.append(script);
    }

需要引入進去幾個js,就需要動態創建幾個script標籤,不然後者會將前者覆蓋

將js添加到頭的話是因為

必須等到全部的js程式碼都下載解析和執行完成以後,才開始展現頁面內容

引入的時候有個坑

在html中script引入js的話他的js地址為

http://http://localhost:端口号/你的js名称

也就是指瀏覽器找尋的js位址是你專案中public中的文件也就是靜態資源下的文件,所以我們需要將js放入public(靜態資源目錄下)引入的話直接/你的路徑。

推薦學習:《

react影片教學

以上是react怎麼引入外部方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn