使用 withScriptjs HOC 时所需的道具是什么答案

【问题标题】：What are the required props used for when using withScriptjs HOC使用 withScriptjs HOC 时所需的道具是什么
【发布时间】：2018-07-23 02:01:52
【问题描述】：

刚开始使用react-google-maps，想知道在使用withScriptsjs HOC 时需要使用哪些属性 loadingElement、containerElement 和 mapElement。如示例所示，它们是否严格用于样式？同样，我不确定这些属性的用途。

【问题讨论】：

标签： react-google-maps

【解决方案1】：

这个答案是关于与withGoogleMap HOC 关联的containerElement 和mapElement 道具。

如果您不包含 containerElement 或 mapElement 属性（在 this CodeSanbox demo app 中测试它），您会收到以下错误：

缺少必需的道具 containerElement 或 mapElement。你需要提供他们两个。 google.maps.Map 实例将是在 mapElement 上初始化，并由 containerElement 包装。你需要同时提供它们，因为 Google Map 要求 DOM 具有初始化时的高度。

在我看来，mapElement 属性用于指定地图也将附加的 HTML 元素。

在simple Vanilla JavaScript example（取自谷歌地图文档）中，这由以下代码表示：

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

google.maps.Map 构造函数的第一个参数是要在其中创建新地图的 DOM 元素。在 JS 示例中，这是 div 元素，在 body 标记 (<div id="map"></div>) 内带有“map”的 id。

至于containerElement 属性：同一个JS 示例没有明确指定容器元素，因为我认为body 和html 元素被假定为容器。这就是 CSS 为它们指定高度的原因：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

这与我上面分享的错误的以下部分有关：

...谷歌地图在初始化时要求 DOM 有高度。

如果您从 JS 示例中删除 height: 100% CSS 规则（尝试从 this JSBin 中的 CSS 中删除它），地图将不再显示。这可能相当于删除 containerElement 属性。

关于 loadingElement 道具，我还不确定那是什么... :)

【讨论】：