如何在渲染组件时添加谷歌 api 脚本

Question

我正在尝试在需要时以编程方式添加谷歌 api 脚本。但是，我收到一个错误，指出未定义谷歌。我可以看到脚本是在正文标签结束之前添加的。

早些时候，我将脚本加载到index.html文件中，但是，我现在在应用程序的其他地方创建了一个不同的组件，该组件需要自己的脚本，因为它具有不同的api密钥。因此，我不得不从索引中删除脚本.html因为它为多次使用脚本提供了例外。现在我想在加载组件时添加它。

有关主要组件，请参阅下面的代码：

import React from 'react';
import { Button } from 'reactstrap';
import CitySuggestionBar from './CitySuggestionBar';
export default class Destination extends React.Component{
    componentDidMount(){
        this.renderScript();
    }
    renderScript = () => {
        loadScript('https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places');
      }
    showPlaceDetails(place) {
        let city = place.address_components[0].long_name.toString();
        try{
            city+= '+' + place.address_components[2].long_name.toString();
        }catch(e){}
        city = city.replace(/s/g, "+");
        sessionStorage.setItem('city', city);
        console.log(city);
    }
    redirect = () =>{
        sessionStorage.getItem('city') ? this.props.history.push("/hotels") : alert('Please select a city first');
    }
    render(){
        return(
            <div className="location-search-container">
                <div className="location-search-wrapper">
                    <h1>Search for a city...</h1>
                    <CitySuggestionBar onPlaceChanged={this.showPlaceDetails.bind(this)} />
                    <Button onClick={this.redirect} className="btns" to="/hotels" color="primary">Proceed</Button>
                </div>
            </div>
        );
    }
}
const loadScript = (url) => {
    const index = window.document.getElementsByTagName('script')[0];
    const script = window.document.createElement('script');
    script.src=url;
    index.parentNode.insertBefore(script, index);
  }

下面是使用谷歌地图的组件的代码，它是上述主要组件的子组件：

import React from "react";
/* global google */

export default class CitySuggestionBar extends React.Component {
  constructor(props) {
    super(props);
    this.autocompleteInput = React.createRef();
    this.autocomplete = null;
    this.handlePlaceChanged = this.handlePlaceChanged.bind(this);
  }
  componentDidMount() {
    this.autocomplete = new window.google.maps.places.Autocomplete(this.autocompleteInput.current,
        {"types": ['(cities)']});
    this.autocomplete.addListener('place_changed', this.handlePlaceChanged);
  }

  handlePlaceChanged(){
    const place = this.autocomplete.getPlace();
    this.props.onPlaceChanged(place);
  }

  render() {
    return (
        <input ref={this.autocompleteInput}  id="autocomplete" placeholder="Search"
         type="text"></input>
    );
  }
}

请帮忙！提前谢谢。

Answer 1

在上面的代码片段中，我可以看到每次 componentDidMount 它会再次创建另一个脚本标签来避免这种情况，您可以按如下方式修改 loadScript 方法：

const loadScript = (url) => {
    const googleScript = window.document.getElementByClassName('google-script');
    if (googleScript.length === 0) {
        const script = window.document.createElement('script');
        script.src=url;
        script.class="google-script"
        document.body.appendChild(script)
    }
}

如果你想删除谷歌脚本，你可以在组件WillUnmount中处理这个。

使用此选项不会显示多次使用脚本标记的异常。

另外，如果您想知道脚本标签是否已加载，您可以通过在 loadScript 方法中添加另一个标签来找到它，如下所示：

const loadScript = (url) => {
    const googleScript = window.document.getElementByClassName('google-script');
    if (googleScript.length === 0) {
        const script = window.document.createElement('script');
        script.src=url;
        script.class="google-script"
        document.body.appendChild(script)
        script.onload = () => {
            // Place code here to do further action.
        };
    }
}

<----------------------------更新--------------------------->

为了解决"google未定义"错误，您可以尝试遵循为Google Maps API创建承诺的方法，并在Google Maps API可以运行的（全局）回调函数中解决该承诺。在组件代码中，您需要等待承诺得到解决，然后再继续。

const loadScript = () => {
  if (!this.googleMapsPromise) {
    this.googleMapsPromise = new Promise((resolve) => {
      // Add a global handler for when the API finishes loading
      window.resolveGoogleMapsPromise = () => {
        // Resolve the promise
        resolve(google);
        // Tidy up
        delete window.resolveGoogleMapsPromise;
      };
      // Load the Google Maps API
      const script = document.createElement("script");
      const API = //your api key;
        script.src = `https://maps.googleapis.com/maps/api/js?key=${API}&callback=resolveGoogleMapsPromise`;
      script.async = true;
      document.body.appendChild(script);
    });
  }
  // Return a promise for the Google Maps API
  return this.googleMapsPromise;
}

componentWillMount() {
  // Start Google Maps API loading since we know we'll soon need it
  this.loadScript();
}
componentDidMount() {
  // Once the Google Maps API has finished loading, initialize the map
  this.getGoogleMaps().then((google) => {
    const uluru = { lat: -25.366, lng: 131.044 };
    const map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: uluru
    });
    const marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  });
}
render() {
  return (
    <div>
      <div id="map" style={{width: 600, height: 300}}></div>
    </div>
  )
}