Javascript 渲染后不显示React贴图元素

我在

weather

项目中找到了React at中唯一可用的谷歌地图示例。可与

npm i一起安装；npm启动

我知道当你点击地图时，地图不会显示错误，但页面上不会显示任何内容。如果您检查元素并打开主体，您确实会看到许多div包含googlemap的html，但什么都看不见。我不是在设计东西，所以我不知道为什么它是隐形的

地图是

import React, { Component } from 'react';

class GoogleMap extends Component {

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

  render() {
    return <div ref="map" />;
  }
}

export default GoogleMap;

import React，{Component}来自'React'；
类GoogleMap扩展组件{
componentDidMount（）{
新的google.maps.Map（this.refs.Map{
缩放：12，
中心：{
拉特：这个，道具，拉特，
液化天然气：这是道具
}
});
}
render（）{
返回；
}
}
导出默认谷歌地图；

确保地图的父容器具有明确的高度和宽度大小。地图就在那里，没有这些变化它就不会显示出来

我曾经遇到过谷歌地图不显示的问题，这是由于样式。确保贴图的父容器具有明确的高度和宽度大小，并且您应该很好。地图就在那里，如果没有这些更改，它将无法显示。不确定谷歌地图是如何工作的，但你确定它与

refs

一起工作，而不是

id

？另外，您应该考虑使用字符串文字作为

refs

-这是不推荐使用的。@KeithAlpichi我在这方面浪费了比任何人都多的时间，请回答，这样我才能接受更改是