javascript - react-google-maps 重组错误 - `not a function`

Question

尝试运行顶级定义的 react-google-maps 组件时出现错误。 (0 , _reactGoogleMaps.withProps) 不是函数

这是我的代码(codesandbox):

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

有什么想法吗？

Answer 1

您正在从 react-google-maps 导入 withProps。您应该从 recompose 导入它:

import { compose, withProps } from 'recompose';