MobX React :보기의 일부만 다시 렌더링하는 방법

Question

지도가 반응하는 구성 요소가 있고 동적으로 마커를 추가하고 있습니다. 문제는 상점에 마커를 추가하면 전체지도가 다시 추가되는 대신 마커를지도에 표시합니다. 이것이 고정 될 수있는 방법에 대한 제안이있는 사람이 있습니까 ?? 나는 상점을 CPMap 함수로 독점적으로 주입해야한다고 확신한다. 나는 어떻게 확신 할 수 없다.

const CPMap = withGoogleMap((props) => (
     <GoogleMap 
      ref={props.onMapLoad} 
      style={{ 
       height: 100, 
       width: 100, 
      }} 
      onCenterChanged={props.boundsChanged} 
      defaultOptions={{ styles: this.mapStyles }} 
      defaultZoom={props.zoom} 
      defaultCenter={{ lat: props.center.lat, lng: props.center.lng }}> 
      <MarkerClusterer 
       gridSize={40}> 
       { 
        props.markers.map(({ key, position }) => (
         <Marker 
          key={key} 
          position={{ lat: position.lat, lng: position.lng }} 
          icon={{ 
           url: require('../../images/marker.png') 
          }} 
         /> 
        )) 
       } 
      </MarkerClusterer> 
     </GoogleMap > 
    )) 

    return (
     <CPMap 
      style={{ 
       height: 100, 
       width: 100, 
      }} 
      onMapLoad={(gMap) => { 
       map = gMap 
       this.props.map.fetchMarkers() 
      }} 
      boundsChanged={() => { 
       this.props.map.fetchMarkers() 
      }} 
      center={this.props.map.center} 
      zoom={this.props.map.zoom} 
      markers={mobx.toJS(this.props.map.markers)} 
      containerElement={ 
       <div style={{ height: 'calc(100vh - 70px)' } 
       } /> 
      } 
      mapElement={ 
       <div style={{ height: 'calc(100vh - 70px)' }} /> 
      } /> 
    ) 
} 

Answer 1

다음과 같은 해결책을 제안합니다. CMap 구성 요소에 제조업체를 직접 전달하지 말고 대신 저장소를 사용하십시오.

const markersStore = observable({ 
    markers: [] 
}); 

그런 다음 구성 요소 - 별도의 구성 요소에 MarkersClusterer를 이동하고 통과 markersStore가 한 단계 더 깊은 :이 업데이트 있도록

//import markersStore or inject via mobx-react package 
class MyComponent extends Component { 
    render() { 
     const CMap = withGoogleMap((props) => (
     <GoogleMap 
      ... 
      <Clusterer markersStore={props.markersStore} /> 
     /> 
    )) 
     return (
     <CMap 
      ... 
      markersStore={markersStore} 
     /> 
    ) 
    } 
} 

새 클러스터 구성 요소를 관찰 할 때 markersStore "마커"속성 업데이트;

@observable 
class Clusterer extends Component { 
    render(){ 
     const { markers } = this.props.markersStore; 
     return (
      <MarkerClusterer> 
       { markers.map(...)} 
      </MarkerClusterer> 
     ) 
    } 
} 

마지막 변경 사항은 fetchMarkers 메소드를 업데이트하여 markersStore에 새 데이터를 채우는 것입니다.

이 솔루션을 사용하면 CMap 구성 요소는 마커에 대해 알지 못하고 새 데이터를받을 때 업데이트되지 않습니다. 동시에 MarkersClusterer 구성 요소가 더 영리 해져서 마커 스토어에서 변경 사항을 "관찰"합니다.