Wie kann ich diese.map in diese Google Map Events eintragen?

Question

Ich habe Probleme mit react + Google Maps API.

ich den Wert von this.map in meinem Konstruktor Einstellung:

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

ich die Google Maps API bin Laden und meine Karte in der componentWillReceiveProps Methode einrichten:

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

Gibt es eine Möglichkeit Ich kann this.map übergeben neben einer anderen Variablen const map = this.map oder etwas und das weitergeben?

Ich bin besorgt, dass const map = this.map durch die Verwendung und dann weiter modifiziert auf nur map wird zu Problemen führen, wenn ich this.map Wert zu aktualisieren vergessen :(

Answer 1

Ich denke, dass ein Pfeil Funktion der Lage sein, ein Zugriff auf this innen . anonyme Funktion Sie könnten in der Lage sein, es zu tun, wenn Sie ändern:

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

mit diesem:

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

Im Allgemeinen würde ich nicht empfehlen, Werte direkt dem Kontext als Attribute in React.js zuzuweisen und der Zustand der Komponente ist der übliche Weg zu gehen. Aber obwohl ich die Google Map API selbst nicht benutzt habe, denke ich, dass es einen guten Grund gibt, map direkt an this zu vergeben, weil ich ein paar Orte gesehen habe, an denen es so gemacht wird.