javascript - react-google-maps 重构错误-`不是函数`
问题描述
尝试运行顶级定义的 react-google-maps 组件时出现错误。(0 , _reactGoogleMaps.withProps) is not a function
这是我的代码(代码和框):
import * as React from 'react'
import {
withScriptjs,
withGoogleMap,
GoogleMap,
Marker,
withProps,
withState,
withHandlers
} from "react-google-maps";
import { compose } from 'recompose'
var service, refs;
const LocationPicker = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,places&key=AIzaSyDnKwHUG_EJXN5EEW6hTftZHYo8E8QTTXY",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
withScriptjs,
withGoogleMap,
withState('places', '', ''),
withHandlers(() => {
refs = {
map: undefined,
}
return {
onMapMounted: () => ref => {
refs.map = ref
service = new google.maps.places.PlacesService(refs.map.context.__SECRET_MAP_DO_NOT_USE_OR_YOU_WILL_BE_FIRED);
},
}
}),
)((props) => {
return (
<GoogleMap
ref={props.onMapMounted}
defaultZoom={13}
defaultCenter={{ lat: 42.3570637, lng: -71.06257679999999 }}
>
{props.marker &&
<Marker position={{ lat: props.marker.lat, lng: props.marker.lng }} draggable={true} />
}
</GoogleMap>
)
})
class HomeMap extends Component {
state = {
sideBarOpen: true,
values: [800, 1200]
}
render() {
return (
<div>
<div id="map-wrapper">
<LocationPicker
googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}
lat={42.357527}
lng={-71.062778}
marker={this.state.marker}
/>
</div>
</div>)
}
}
有任何想法吗?
解决方案
您正在withProps
从react-google-maps
. 您应该从以下位置导入它recompose
:
import { compose, withProps } from 'recompose';
推荐阅读
- python - Python 可迭代协议
- python - 在 Python 中从 Dataflow 连接到 CloudSQL
- python - 在函数参数python中传递多个字典
- python - 有没有办法使用内部函数而不返回它们
- macros - 如何使用宏读取 SAS 中的多个 excel 文件?
- c - Linux 编程。如何使用消息队列发送数组?
- java - Java 流删除前三个元素
- java - 如何像在 java 中一样在 kotlin 中自动实现/生成方法
- parsing - GNU Bison 输出错误“语法错误,意外字符串,期待 =”
- java - 免费迁移到 Heroku:测功机、睡眠和石英