Google Maps APIの読み込みスクリプトにReactコンポーネント内のコールバックを探す方法を教えてください。

Question

私のレールアプリでは、私はreact.js（react-rails gem）を使ってアプリケーションのクライアント側をビルドします。
いくつかのジオロケーション機能を実装するためにgoogle maps APIを使用したいと思います。

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ない機能 - APIスクリプトはこのスコープでコールバック関数を参照してくださいdoesntのことを意味します。

私はどこかで、この機能をウィンドウスコープで見るはずです。 だから私はこのようにそれをハックしようとしています動作しますが、窓の上に定義された関数から、私はコンポーネントのものを反応させるにはアクセスできませんので、この文脈では意味をなさないdoesntのこと、実際に

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

。

コールバック関数では、APIが正常に読み込まれたことを示すために、状態api_ready：trueを設定します。

したがって、Reactコンポーネント内でコールバック関数を探すようAPIスクリプトに指示することができますか？

Answer 1

週間前、私は地図のコンポーネントをしなければならないと私は、彼らは3つのスクリプトを使用this articleが見つかりました：

• 1は、外部スクリプトをキャッシュすると、
• 最初のものを使用してGoogle Maps APIを呼び出すことができます。
• 最後にラップされたコンポーネントにpropsとして渡されるマップapiとの接続に使用できるラッパーコンポーネントです。