Question

我有嵌套组件。组件地图用于获取Google Map，组件用于包含该地图中的标记。地图

中的标记

window.google变量在地图组件中可用，但在 Marker 组件中未定义。

地图：

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 }

所以...。为什么全局变量 window.google 在 Map 组件中很好并且在 Marker 中未定义？

谢谢！

Answer 1

您正在检查错误的位置，因为我在Plunker中使用了与您的代码相同的地方，我可以访问位置window.google变量，请检查下面提到的代码以供参考。

Check Here

Answer 2

这是因为方法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>
    )
  }
}

React中嵌套组件中的全局变量

2 个答案: