如何将this.map传递到此Google Map事件中？

Question

I'm facing some trouble with react + google maps API.

I am setting the value of this.map in my constructor:

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

I am loading the google maps API and setting up my map in the componentWillReceiveProps method:

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);
        });

Is there a way I can pass this.map besides create another variable const map = this.map or something and passing that?

I am worried that by using const map = this.map and then modifying further on just map will lead to issues if I forget to update this.map value :(

Answer 1

I think that using an arrow function to be able to access this inside an anonymous function. You might be able to do it if you change:

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);
    });

with this:

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);
        });

In general I wouldn't recommend assigning values directly to the context as attributes in React.js and the component's state is the usual way to go. But even though I haven't used the Google Map's API myself I guess that there is a good reason to do assign map directly to this because I've seen a couple of places where it's done this way.