不能在补偿中使用道具

Question

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

谷歌包使用的问题是重新组合，但当我调用其中的道具时，无法获得我的数据道具是空的：

我的地图：

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参数传递到GoogleMap组件，而不是绑定到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也可以省略

演示