最近在做一個北京地鐵費用查詢系統的Web，前端使用的是React。

後來查詢到百度地圖和高德地圖都有實現好的地鐵圖API，可以直接使用（最後選擇了百度，因為官方文件詳細很多）。但是官方教程都是直接插入到一個原生HTML中。而我們都知道React使用JSX將元素渲染為DOM，主要問題就在於我在index.html中匯入了百度地圖的script，要怎麼在React元件中使用。

以下解決方案以百度地圖為例，適用於其他沒有module的CDN方案，如果有更好的方法歡迎在評論區提出。

如果我們直接在index.html中，貼上了script，然後在React元件中使用，會出現報錯

'BmapSub' is not defined
 

說明React元件沒有獲取到對應的類和方法。

第一步，在你的index.html中，匯入百度地鐵的script。

<!-- index.html -->
<script type="text/javascript" src="https://api.map.baidu.com/api?type=subway&v=1.0&ak=您的金鑰"></script>

第二步，用window這個全域性變數來儲存需要用到的類。

所有瀏覽器都支援 window 物件。它表示瀏覽器視窗。

所有 JavaScript 全域性物件、函式以及變數均自動成為 window 物件的成員。

全域性變數是 window 物件的屬性，全域性函式是 window 物件的方法。

所以我們在window中儲存我們需要用到的類和方法。這裡就儲存BMapSubway

<!-- index.html -->
<script type="text/javascript" src="https://api.map.baidu.com/api?type=subway&v=1.0&ak=您的金鑰"></script>
<script>
	window.BMapSubway = BMapSubway;	// 這裡可以訪問到BmapSubway這個類，所以直接設為全域性類
</script>
 

第三步，愉快地在React元件中使用。

// Map.js
import React from 'react';

class Map extends React.Component {
    createSubway (){
        let BMapSub = window.BMapSub;		// 關鍵，取全部變數為區域性變數，然後使用
        var subwayCityName = '北京';
        var list = BMapSub.SubwayCitiesList;
        var subwaycity = null;
        for (var i = 0; i < list.length; i++) {
            if (list[i].name === subwayCityName) {
                subwaycity = list[i];
                break;
            }
        }
        var subway = new BMapSub.Subway('map', subwaycity.citycode);
        subway.setZoom(1);
    }

    componentDidMount() {
        this.createSubway();
    }

    render() {
        return (
            <div id="map">
            </div>
        );
    }
}

export default Map;

多說一句，這裡插入一下componentDidMount()的使用。上面使用了componentDidMount()，是因為我要把地鐵圖插入到我將要渲染的<div id="map"></div>中，也就是我必須得等該div渲染完畢，我的程式碼才能獲取到。（在原生HTML中，我們通過更改程式碼順序就可以簡單地實現）

而componentDidMount()會在元件掛載後（插入 DOM 樹中）立即呼叫。依賴於 DOM 節點的初始化應該放在這裡。如需通過網路請求獲取資料，此處是例項化請求的好地方。

所以，我把地圖初始化放在了componentDidMount()中，這樣當頁面渲染完畢，我就可以獲取到<div id="map"></div>併成功插入地圖。