2

我收到此警告：失败的 propType：尝试构建谷歌地图时component提供的无效道具。Route

这是应用程序：

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') 
)

任何帮助将非常感激！

4

2 回答 2

2

它通过将“导出默认 WrappedMap”更改为“module.exports = WrappedMap;”来工作。原因 JS 使用

 module.exports

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

于 2019-03-13T12:38:13.087 回答
0

我不熟悉 react google maps，但看起来 GoogleApiWrapper 返回的任何组件都不是 react-router 期望的适当组件。尝试做这样的事情：

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

export default WrappedMap
于 2018-08-02T15:55:59.010 回答