警告:失败的propType:提供给"Route"Google Map React的prop&quo

Question

我收到以下警告：失败的道具类型：在尝试构建谷歌地图时，向Route提供的道具component无效。

这是应用程序：

import React, { Component } from "react";
import { Map, InfoWindow, Marker, GoogleApiWrapper } from "google-maps-react";
class Maps extends Component {
render() {
return (
<div className="cd-map">
<h3>Map Component</h3>
<Map google={this.props.google} zoom={14}>
<Marker onClick={this.onMarkerClick} name={"Current location"} />
<InfoWindow onClose={this.onInfoWindowClose}>
<div>
<h1>{this.state.selectedPlace.name}</h1>
</div>
</InfoWindow>
</Map>
</div>
);
}
}
export default GoogleApiWrapper({
apiKey: "API-Key"
})(Maps);

路线：

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var {Route, Router, IndexRoute, hashHistory} = require('react-router'); 
var Main = require('Main'); 
var Intro = require('Intro'); 
var Instructions = require('Instructions'); 
var Maps = require('Maps'); 
ReactDOM.render( 
<Router history={hashHistory}> 
<Route path="/" component={Main}> 
<IndexRoute component={Intro}/> 
<Route path="instructions" component={Instructions}/> 
<Route path="maps" component={Maps}/> 
</Route> 
</Router>, 
document.getElementById('app') 
)

任何帮助都将不胜感激！

Answer 1

它的工作原理是将"export-default WrappedMap"更改为"module.exports=WrappedMMap；"。原因JS使用

module.exports

然而，按照惯例，这意味着您只是在使用一个常规的Javascript对象。Google Api不返回组件。

Answer 2

我不熟悉react谷歌地图，但看起来GoogleApiWrapper返回的任何内容都不是react路由器所期望的合适组件。尝试这样做：

const WrappedMap = GoogleApiWrapper({
apiKey: __APIKEY___
})(Container);
export default WrappedMap