如何从父组件传递数据或在 react-google-maps 库的映射函数中使用 axios?

Question

我尝试将标记坐标的数组和一些其他属性从索引页(CardTransactionMapRGMs 组件的父级(传递给map函数，以便它可以使用数据来映射标记。但是，我可以在 CardTransactionMapRGM 中获取道具，但我不知道如何在 Map 函数中获取它或如何重新组织它。 我也对这个"const WrapperMap = withScriptjs(withGoogleMap(Map((;"感到非常困惑。 非常感谢！这是我的代码：

在索引中.js

<CardTransactionMapRGMs charges={this.state.charges} coordinates={this.state.coordinates} />

在 CardTransactionMapRGM 中.js

import React, { Component } from 'react';
import axios from 'axios';
import { GoogleMap, Marker, withScriptjs, withGoogleMap } from "react-google-maps";
import Constants from '../Constants';
import MapMarker from './MapMarker';

function Map() {
return (
<GoogleMap
defaultZoom={10}
defaultCenter={{ lat: 38.96, lng: -77.29 }}
>
//I want to use {props.coordinates.map(e)=> {
// <Marker...>}}here
<Marker position={{ lat: 38.96, lng: -77.29 }} />
</GoogleMap>
)
}

class CardTransactionMapRGMs extends Component {
render() {
const WrapperMap = withScriptjs(withGoogleMap(Map));
return (
<div>
<WrapperMap
googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=${Constants.GOOGLE_MAP_API_KEY}`}
loadingElement={<div style={{ height: '100%' }}></div>}
containerElement={<div style={{ height: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}

/>
</div>
);
}
}
export default CardTransactionMapRGMs;

Answer 1

您可以在Map功能组件中使用道具。

function Map(props){
return <GoogleMap
defaultZoom={10}
defaultCenter={{ lat: 38.96, lng: -77.29 }}>
{props.coordinates.map(markerProps)=> <Marker {markerProps}>}
<Marker position={{ lat: 38.96, lng: -77.29 }} />
</GoogleMap>
}

CardTransactionMapRGMs.js

class CardTransactionMapRGMs extends Component {
render() {
const WrapperMap = withScriptjs(withGoogleMap(Map));
return (
<div>
<WrapperMap
googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=${Constants.GOOGLE_MAP_API_KEY}`}
loadingElement={<div style={{ height: '100%' }}></div>}
containerElement={<div style={{ height: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}
coordinates={[{ lat: 38.96, lng: -77.29 }]}
/>
</div>
);
}
}