Question

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

我在构造函数中设置this.map的值：

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

我正在加载Google地图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中的属性，并且组件的状态是常用的方法。但即使我自己没有使用过谷歌地图的API，我想有充分的理由将map直接分配给this，因为我已经看过了以这种方式完成的几个地方。

如何将this.map传递到此Google地图活动中？

1 个答案: