React에서 45k 요소를 특성에 채우는 올바른 방법

Question

45KB의 JSON 형식의 좌표 개체가 있는데이를지도 구성 요소에 마커로 넣을 수 있습니다.

나는 다음과 같은 코드가있다 :

const MapWithMarkers = withGoogleMap(props =>GoogleMap 
    defaultZoom={8} 
    defaultCenter={{ lat: -34.397, lng: 150.644 }} 
    > 
    <Marker 
     position={{ lat: -34.397, lng: 150.644 }} 
    /> 
    </GoogleMap> 
); 

<MapWithAMarker 
    containerElement={<div style={{ height: '400px' }} />} 
    mapElement={<div style={{ height: '100%' }} />} 
/> 

어떻게 그런이 가장 올바른 방법으로 달성 할 수 있는가?

감사합니다.

Answer 1

지도 구성 요소에 소품으로 데이터를 전달한 다음지도 구성 요소에서 소품 및 매핑에있는 데이터를 가져 와서 모든 항목에 대한 마커를 생성합니다.

<GoogleMap> 

     { 
      (props.markerData).map((marker, i) => {return <Marker key={i} position={{ lat: parseFloat(marker.lat), lng: parseFloat(marker.lng) }} />}) 
     } 

</GoogleMap>