如何將this.map傳遞到此Google地圖事件中？

Question

我在使用react + google maps API時遇到了一些麻煩。

我設置的this.map值在我的構造函數：

constructor(props) { 
    super(props); 
    this.map = null; 
    } 

我加載了谷歌地圖API，並在componentWillReceiveProps方法建立我的地圖：

componentWillReceiveProps({ isScriptLoaded, isScriptLoadSucceed }) { 
    if (isScriptLoaded && !this.props.isScriptLoaded) { // load finished 
     console.log('yes - isScriptLoaded && !this.props.isScriptLoaded'); 
     if (isScriptLoadSucceed) { 
     this.map = new google.maps.Map(this.refs.map, mapOptions); 

     /* not sure how to do this part */ 
     google.maps.event.addDomListener(window, 'resize', function() { 
      const center = this.map.getCenter(); //this.map undefined, unless above I add const map = this.map, and then use map. 
      google.maps.event.trigger(this.map, 'resize'); 
      this.map.setCenter(center); 
     }); 

是否有辦法我可以通過this.map除了創建另一個變量const map = this.map或什麼東西，並通過？

我很擔心，通過使用const map = this.map，然後在剛剛map進一步的修改會導致問題，如果我忘記更新this.map值:(

Answer 1

我覺得用一個箭頭功能，能夠訪問this內的。

google.maps.event.addDomListener(window, 'resize', function() { 
     const center = this.map.getCenter(); //this.map undefined, unless above I add const map = this.map, and then use map. 
     google.maps.event.trigger(this.map, 'resize'); 
     this.map.setCenter(center); 
    }); 

與此：匿名函數，如果你改變你也​​許可以做到這一點

google.maps.event.addDomListener(window, 'resize',() => { 
      const center = this.map.getCenter(); //this.map undefined, unless above I add const map = this.map, and then use map. 
      google.maps.event.trigger(this.map, 'resize'); 
      this.map.setCenter(center); 
     }); 

一般來說，我不建議將值直接分配給上下文作爲React.js中的屬性，並且組件的狀態是通常的方式。但即使我自己並沒有使用Google Map API，我猜想有一個很好的理由將map直接分配給this，因爲我已經看到了幾個這樣做的地方。