React不想渲染Maps组件

Question

尝试学习React并集成JS的Google Maps API。在App.jsx中，我具有路由：

<Router>
    <Switch>
      <Route exact path="/" component={LandingPage} layout={LandingLayout} />
    </Switch>
</Router>

在LandingLayout中，我有Semantic UI的边栏实现，因为我想在所有地方显示边栏，所以这是我的布局。在组件LandingPage中，我具有以下几行代码：

return <MapContainer />;

在MapContainer中，我从Google Maps React文档中复制粘贴了代码：DOCS

已加载侧边栏，一切正常，但是Google地图不想渲染，我也不知道为什么。

Answer 1

我没有看到您的代码，我认为它可能只是MapContainer的大小未定义为注释中提到的其他代码。如果是另一个问题，请显示更多代码。

我将使用MapContainer样式在width: 100%; height:100%;组件周围添加包装器div。在演示中，我还向html,body添加了一种样式以使其具有完整的页面尺寸（请参见styles.css）。

它的工作方式应类似于以下Codesandbox。 （由于API密钥不正确，地图未加载到沙箱中。）