Question

我收到此警告：propType失败：尝试构建Google地图时，提供给component的prop 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') 
)

任何帮助将不胜感激！

Answer 1

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

 module.exports

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

Answer 2

我对React谷歌地图不熟悉，但看起来GoogleApiWrapper返回的内容都不是react-router期望的适当组件。尝试做这样的事情：

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

export default WrappedMap

警告：propType失败：提供给Route Google Map React的prop属性无效

2 个答案: