react如何引入外部方法

本篇內容介紹了“react如何引入外部方法”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

react引入外部方法的方法：1、通過import引入外部方法；2、通過react中的生命周期來引入外部方法，代碼如“componentDidMount(){let scriptSrc = ['/config/jquery.min.js', '/config/lib/codemirror.js']scriptSrc.map(res => {...}”。

記錄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如何引入外部方法”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！