渲染后反应地图元素不显示答案

【问题标题】：React map element does not show up after render渲染后反应地图元素不显示
【发布时间】：2017-10-21 08:59:11
【问题描述】：

我在weather 项目中的https://github.com/StephenGrider/ReduxCasts 找到了React 中唯一可用的谷歌地图示例。可以用npm i; npm start安装

我有https://bitbucket.org/codyc54321/anthony-project-react，当您单击它们时，地图没有显示错误，但页面上没有显示任何内容。如果您检查元素并打开正文，您确实会看到许多包含谷歌地图的 html 的 div，但什么都看不到。我没有设计样式，所以我不知道为什么它会不可见。

地图是

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;

【问题讨论】：

我过去曾遇到过无法显示谷歌地图的问题，这是由于样式问题。确保地图的父容器具有明确的高度和宽度大小，你应该很好。地图就在那里，如果没有这些更改，它就不会显示。
不确定谷歌地图是如何工作的，但你确定它适用于refs 而不是id？此外，您应该 read this 将字符串文字用于 refs - 它已被弃用。
@KeithAlpichi 我在这件事上浪费了我生命中的大部分时间，比任何人都应该做的，请回答我可以接受
更改为<div style={ {height: 250, width: 250 } } ref="map" />

标签： javascript google-maps reactjs

【解决方案1】：

确保地图的父容器具有明确的高度和宽度尺寸。地图在那里，如果没有这些更改，它就不会显示。

【讨论】：