Wie kann Google Maps API Lade-Skript angewiesen werden, im Componet React nach Callback zu suchen?

Question

In meiner Rails App verwende ich react.js (react-rails gem), um die Client-Seite meiner Anwendung zu erstellen.
Ich möchte Google Maps API verwenden, um einige Geolocation-Funktion zu implementieren.

class HomePage extends React.Component { 
    constructor(props) { 
     super(props) 
    } 

    initGeoTools(){ 
    console.log('callback invoked'); 
    } 

    render() { 
     return(
      <div> 
      //.. 
      <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initGeoTools" 
async defer></script> 
      </div> 
     ); 
    } 
} 

initGeoToolsis keine Funktion - das die API-Skript bedeutet in diesem Bereich Callback-Funktion sehen tut.

Ich habe irgendwo gelesen, dass es diese Funktion im Fensterbereich sehen sollte. Also habe ich versucht, es so zu hacken:

class HomePage extends React.Component { 
    constructor(props) { 
     super(props) 
    } 

    componentWillMount(){ 
    window.initGeoTools = function(){ 
     console.log('callback invoked'); 
    } 
} 

    render() { 
     return(
      <div> 
      //.. 
      <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initGeoTools" 
async defer></script> 
      </div> 
     ); 
    } 
} 

die Tat, das funktioniert aber Sinn in diesem Zusammenhang doesnt zu machen, da von der Funktion definiert auf Fenster habe ich keinen Zugriff Komponente Sachen zu reagieren.

In einer Callback-Funktion möchte ich den Status api_ready setzen: true um anzuzeigen, dass die API erfolgreich geladen wurde.

Die Frage ist also, wie kann ich API-Skript zu Callback-Funktion innerhalb der React-Komponente?

Answer 1

Vor einer Woche habe ich eine Karte Komponente zu tun, und ich fand this article, wo sie drei Skripte verwendet:

• eine externe Skripte cachen;
• man den Anruf für die Google Maps API mit dem ersten Aufruf machen;
• und die letzte, die eine Wrapper-Komponente ist, die Sie verwenden könnten, um eine Verbindung mit den Karten-API herzustellen, die als Requisiten an die umschlossene Komponente übergeben wurden.