谷歌地图做出反应/终极版组件

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/将指导您如何做到这一点。