Глобальные переменные во вложенных компонентах в React

Question

У меня есть вложенный компонент.Компонент Карта для получения карты Google и компонент для маркеров на этой карте. Маркер внутри Карта

Переменная window.google доступна в компоненте Карта , но она не определена внутри Маркер comopnent.

Карта:

import React from 'react'
import { Marker } from './Marker'
class Map extends React.Component {
  getGoogleMaps() {
        const script = document.createElement("script");
        const API = 'AIzaS';
        script.src = `https://maps.googleapis.com/maps/api/js?key=${API}&v=3&callback=initMap`;
        script.async = true;
        script.defer = true;
        document.body.appendChild(script);
    }
  componentDidMount() {
    this.getGoogleMaps()
    window.initMap = () => {
      var map = new window.google.maps.Map(document.getElementById('map'), {
        zoom: 15,
        center: {lat: 40.6947591, lng: -73.9950086},
        mapTypeControl: false
      })
      window.map = this.map
      console.log('<Map/> google:',window.google);
    }
   }
  render() {
    return (
      <div>
        <div id="map" ></div>
        <Marker/>
      </div>
    )
  }
}
export { Map }

:

 import React from 'react'
    class Marker extends React.Component {
      render() {
        return(
          <div>
            {console.log('<Marker/> google:',window.google)}
          </div>
        )
      }
    }
    export { Marker }

Итак .... Почему глобальная переменная окно.google подходит для компонента Map и не определен в Marker ?

Спасибо!

Answer 1

Это потому, что метод getGoogleMaps() является асинхронным, и вы вызываете его в componentDidMount.Маркер отображается перед загрузкой скрипта Google Maps.

Например, вы можете использовать состояние isLoading.

class ... {
  state = {
    isLoading: true
  };

  componentDidMount() {
    this.getGoogleMaps()
    window.initMap = () => {
      ...
      window.map = this.map;
      //update state here
      console.log('<Map/> google:',window.google);
    }
  }

  render() {
    return this.state.isLoading 
    ? <div>loading...</div>
    : (
      <div>
        <div id="map" ></div>
        <Marker/>
      </div>
    )
  }
}

Answer 2

Вы проверяете какое-то неправильное место, поскольку я использовал то же самое для того же вашего кода в Plunker, я могу получить доступ к обеим переменным window.google, пожалуйста, проверьте ниже упомянутый plunk для справки.

Проверьте здесь