Google-Maps-React:将道具传递到App.js的问题

Question

我正在开发一个网站，我想通过Google-Maps-React包使用Google Maps API。 我之前已经将其作为单个应用程序进行了测试，并且我成功地设法从API获取数据并将其呈现在屏幕上。现在我正在尝试在我的实际项目中使用它，但它不起作用。我想问题可能是我没有将道具从一个组件正确传递到另一个组件。

有关如何解决此问题的任何建议将不胜感激。谢谢！

这是我的两个组件和我在控制台上收到的消息(Webpack 编译成功(：

index.js：139 未捕获错误：必须包含google道具 在新地图(索引.js：139(

地点.js 保存实际地图

import { Map, GoogleApiWrapper, Marker } from "google-maps-react";
const mapStyles = {
width: '100%',
heigth: '100%',
};
export class MapContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
venues: [
{ lat: 52.471015, lng: 12.719707 }
]
}
}
displayMarkers = () => {
return this.state.venues.map((venue, index) => {
return <Marker key={index} id={index} position={{
lat: venue.latitude,
lng: venue.longitude
}}
onClick={() => console.log(this.state.venues)} />
})
}
render() {
return (
<Map
google={this.props.google}
zoom={8}
style={mapStyles}
initialCenter={{ lat: 52.471015, lng: 12.719707 }}
>
{this.displayMarkers()}
</Map>
);
}
}

export default GoogleApiWrapper({
apiKey:''
})(MapContainer);

应用.js

import React from "react";
import { BrowserRouter, Route, Link } from "react-router-dom";
import Main from "./main";
import MapContainer from "google-maps-react";

export class App extends React.Component {
constructor(props) {
super(props);
this.state = {
error: false,
};        
}
componentDidMount() {
console.log("App mounted");
}
render() {
return (
<BrowserRouter>
<div>
<Route exact path="/" component={Main} />
<Route exact path="/venue" component={MapContainer} />
</div>
</BrowserRouter>
);
}
}

Answer 1

因为您的导入 MapContainer 路径不正确！

在您的App.js文件更改中：

import MapContainer from "google-maps-react";

到您的 MapContainer 组件，例如：

import MapContainer from "./components/Venue.js";

简单演示：这里