私は反応コンポーネントのスクリプトファイルを統合する必要がありますか？

Question

これは、HTMLファイルに適切に私のhtmlコードの作品ですが、私はそれはグーグルが定義されていないエラーをスローコンポーネントを反応させ、私にそれをマージするとき、マップはあなたが故にasynchronousとして、あなたの最初のスクリプトをマークしている

<script src="https://maps.googleapis.com/maps/api/jskey=API_Key&libraries=places&callback=init"async defer></script> 
<script> 
    function init() { 
     var map = new google.maps.Map(document.getElementById('mapcanvas'), { 
      center: {lat: -33.8688, lng: 151.2195}, 
      zoom: 13, 
      mapTypeId: 'roadmap' 
     }); 
    } 
</script> 

Answer 1

が定義されていません。 callback paramが指定されています。そのコールバック関数initをグローバルに定義する必要があり（window.init）、の前にを実行して、競合状態を回避するようにasynchronousスクリプトリクエストを作成する必要があります。

私はあなたのreactコンポーネントがすぐにgoogleへのアクセス権を持っているか、window.initが解決されますPromiseを設定しますスクリプトリクエストsynchronousを作るのいずれかを示唆しています。

// before script 
window.loadGoogle = new Promise(resolve => { 
    window.init =() => { 
    resolve(); 
    } 
}); 

// load async script 

// after script 
class MapComponent extends React.Component { 
    constructor(){ 
    super(...arguments); 
    this.state = { loaded: false }; 
    } 
    componentDidMount(){ 
    window.loadGoogle.then(() => { 
     this.setState({ loaded: true }); 
    }); 
    } 
    render(){ 
    const { loaded } = this.state; 
    if(loaded){ 
     // can now use globals defined by async script 
     return <p>Loaded</p>; 
    } 
    return null; 
    } 
}