javascript - 无法在 Recompse 中使用 Props

Question

我是 React 的新手，我设法将谷歌地图添加到我的项目中。

google 包使用 recompose 的问题，但是当我在其中调用 props 时无法获取我的数据 props 为空:

我的 map :

import { compose, withProps } from "recompose"
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"

const MyMapComponent = compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withScriptjs,
  withGoogleMap
)((props) =>
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: this.props.lat, lng:  this.props.lat }}
  >
    {props.isMarkerShown && <Marker position={{ lat: this.props.lat, lng:  this.props.lat }} />}
  </GoogleMap>
));

MyMapComponent 调用:

<MyMapComponent lat={this.state.lat} long={this.state.long}/>

Answer 1

Props 通过 props 参数传递给 GoogleMap 组件，而不是绑定(bind)到 this 上下文，这里是修改后的版本

<GoogleMap
    defaultZoom={4}
    defaultCenter={{ lat: props.lat, lng:  props.long }}  >
    {props.isMarkerShown && <Marker position={{ lat: props.lat, lng:  props.long }} />}
</GoogleMap>

一些其他的变化

• 设置经度的例子有一些错别字

• 通常不需要指定 Google Maps API 版本，因此参数 v 可以省略

• 对于提供的示例，附加库的加载不是必需的，所以 libraries 也可以省略

Demo