Я пытался импортировать внешнюю библиотеку (Google Maps), чтобы использовать ее в компоненте React

Файл index.html

<div id="app"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY_GOES_HERE&callback=initMap" async defer>

файл реакции

  componentDidMount() {
    this.map = new google.maps.Map(this.refs.map, {
      center: {lat: this.props.lat, lng: this.props.lng},
      zoom: 8
    });   
  }

    render() {
      return <div>
        <p>I am a map component</p>
        <div id="map" ref="map"/>
      </div>
    }

Ошибка, которую я получаю:

Uncaught ReferenceError: Google не определен

Я перепробовал все, но ничего не работает. Как мне получить доступ к переменной из этого скрипта внутри моего компонента?

Это всего лишь пример, пожалуйста, не говорите мне использовать один из пакетов NPM для React Google Maps.

Спасибо Харрис

2
Eristikos 6 Янв 2017 в 18:00

3 ответа

Лучший ответ

Ошибка в том, что API Google не загружается до загрузки компонента React.

Поместите тег script для google в шапку, прежде чем загружать ваши скрипты реакции.

<head>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY_GOES_HERE&callback=initMap" async defer>

    <!-- React scripts here -->
</head>

Если проблема не устранена, попробуйте добавить строку debugger; в функцию didComponentMount() и проверьте в консоли, загружен ли и доступен ли google.

1
Phil Poore 6 Янв 2017 в 15:18

В общем случае вы можете импортировать скрипт со следующим:

let aScript = document.createElement('script');
aScript.type = 'text/javascript';
aScript.src = "link to script";
document.head.appendChild(aScript);

ПРИМЕЧАНИЕ. Прежде чем вы сможете использовать переменную, необходимо загрузить скрипт!

После загрузки скрипта вы можете использовать переменную из скрипта с

window.variable

(в таком случае)

window.google.maps.whatever

Если вы хотите использовать переменную непосредственно после импорта скрипта (при загрузке страницы и т. Д.), Вы можете сделать что-то вроде этого:

let aScript = document.createElement('script');
aScript.type = 'text/javascript';
aScript.src = "link to script";

document.head.appendChild(aScript);

aScript.onload = function() {
    window.variableFromScript.whatever
}

1
ernwillburn 16 Окт 2019 в 09:57

Немного опоздал на вечеринку, но у меня тоже была эта проблема, и для меня это было вызвано эслинтом. Чтобы отключить его, просто добавьте комментарий /*global google*/ выше, где вы объявляете переменную, и она должна работать, например.

  componentDidMount() {
    /*global google*/ // To disable any eslint 'google not defined' errors
    this.map = new google.maps.Map(this.refs.map, {
      center: {lat: this.props.lat, lng: this.props.lng},
      zoom: 8
    });   
  }

    render() {
      return <div>
        <p>I am a map component</p>
        <div id="map" ref="map"/>
      </div>
    }

Вы также можете использовать объект окна, чтобы сделать вызов:

  componentDidMount() {
    /* Use new window.google... instead of new google... */
    this.map = new window.google.maps.Map(this.refs.map, {
      center: {lat: this.props.lat, lng: this.props.lng},
      zoom: 8
    });   
  }

    render() {
      return <div>
        <p>I am a map component</p>
        <div id="map" ref="map"/>
      </div>
    }
1
Darkisa 3 Мар 2020 в 19:31