javascript - React map 元素渲染后不显示

Question

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

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

map 是

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;

Answer 1

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