谷歌地圖做出反應/終極版組件

Question

我的反應，和/終極版組件與谷歌地圖合作：

import React, { Component, PropTypes } from 'react' 
import { connect } from 'react-redux' 

import { changeMapCenter } from '../actions' 

class Map extends Component { 

    componentDidMount() { 
    let script = document.createElement('script') 

    script.setAttribute('type', 'text/javascript') 
    script.setAttribute('src', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyCXg-YGJF&callback=initMap') 
    document.getElementsByTagName('head')[0].appendChild(script) 

    window.initMap =() => { 
     this.map = new google.maps.Map(document.getElementById('map'), { 
     center: this.props.defaultCenter, 
     zoom: this.props.defaultZoom 
     }); 

     this.map.addListener('center_changed', (event) => { 
     let center = { 
      lat: this.map.getCenter().lat(), 
      lng: this.map.getCenter().lng() 
     } 
     this.props.onMapCenterChanging(center) 
     }); 
    } 
    } 

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

const mapStateToProps = (state) => { 
    return { 
    mapPoints: state.mapPoints 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
    onMapCenterChanging: (center) => { 
     dispatch(changeMapCenter(center)) 
    }  
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Map) 

正如你可以看到現在這部分只是初始化地圖並監聽地圖中心變化。現在我需要渲染一些標記（mapPoints）。從Google API文檔我可以做到這一點（例如）：

var marker = new google.maps.Marker({ 
    position: myLatlng, 
    map: map, 
    title: 'Click to zoom' 
    }); 

但是我怎麼能在'React-style'中做？由於繪圖標記不是「呈現」HTML，因此只需調用JS Google Maps API函數即可。我可以把這個邏輯放在'initMap'函數中，但是我的'mapPoints'可以改變。我應該在「渲染」功能中使用JS邏輯（刪除已刪除的點/繪製新點）嗎？謝謝！

Answer 1

通常情況下，包裝一些命令式API（如jQuery小部件或類似）的React組件通過不呈現任何東西（或僅呈現最小的內容，如容器div）來實現，然後更新包裝React生命週期方法中的小部件。實際上已經有一些組件已經包含了Google Maps API，特別是，https://www.fullstackreact.com/articles/how-to-write-a-google-maps-react-component/將指導您如何做到這一點。