Question

在我的反应中，我设法将google map添加到我的项目中。

google包使用的问题会重新组合，但是当我在其中调用props时无法获取我的数据props为空：

我的地图：

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

道具通过GoogleMap参数传递到props组件中，而不是绑定到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

无法在Recompse中使用道具

1 个答案: