在react中使用第三方庫

2021-09-25 09:19:06 字數 919 閱讀 5406

例如我的 src/index.js 是長介個樣子的:

import react from 'react'

class index extends react.component

render () }

export default index

在 src/index.js 例項化 bmap 時候卻報錯了,提示bmap is not defined

以模組化的方式構建應用時,在js模組中是不能夠直接訪問入口檔案中的變數的。

那麼我們又該如何在某個js檔案中匯入入口html檔案中的變數呢?

或者說我們如何能夠在src/index.js中取得html中引入的指令碼中的bmap物件呢?

又經過了漫長的多方查詢資料。。。

找到了兩個可行的解決方案

方法一:通過webpack的externals載入bmap使它可以通過import引入

externals:
在 src/index.js 匯入 bmap

import bmap from 'bmap'

// 例項化

const mymap = new bmap.map("csm-map")

方法二:全域性變數

如果是全域性變數,可以直接使用 window.bmap 方法

如果不是全域性變數, 可以在入口檔案 用window物件儲存bmap變數,實現html檔案和js檔案間的變數傳遞

在 src/index.js 中呼叫

const  = window;

// 例項化

const mymap = new bmap.map("csm-map")

react中使用第三方類庫

在這裡我們採用官網的chosen來舉例 stylesheet href chosen.css script chosen.jquery.js script 上述引入完成後第三方類庫實際還是無法使用的,我們還需要在webpack.config.js中進行配置,如果我們的專案是由腳手架建立的,那麼web...

在Eclipseme中使用第三方庫

由於工作關係,需要研究tinyline這個第三方的j2me開發包。我建立project時,把tinyline.zip放在了project的 lib目錄下面,編譯時,可以通過。但是執行時,總是會出現midpsvgcanvas這個類找不到的異常。幾經周折,才發現,用到的tinyline的第三方庫中的cl...

angular在ts中使用第三方js

ngafterviewinit private loadscript scripturl string 本來的方法應該是 a 在assets中新增js檔案 b 在tsconfig.json,屬性compileroptions,新增 allowjs true c angular.json檔案,在scr...