React Leaflet : GeoJSON의 스타일을 동적으로 설정합니다.

Question

GeoJSON 구성 요소의 스타일을 ID가 선택기와 일치하는지 여부에 따라 동적으로 변경하려고합니다.

플러그인 작성자는 스타일을 함수로 전달해야한다고 말하는 Leaflet documentation을 참조합니다. 나는하고 있지만 주사위는 없다.

내 구성 요소 :

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import * as actions from '../../actions'; 
import { Marker, Popup, GeoJSON } from 'react-leaflet'; 
import { centroid } from '@turf/turf'; 

const position = geoJSON => { 
    return centroid(geoJSON).geometry.coordinates.reverse(); 
}; 

export class PlotMarker extends Component { 
    render() { 
     const { 
      id, 
      name, 
      geoJSON, 
      zoomLevel, 
      selectedPlot, 
      plotBeingEdited 
     } = this.props; 
     const markerPosition = position(geoJSON); 
     let style =() => { 
      color: 'blue'; 
     }; 
     if (selectedPlot === id) { 
      style =() => { 
       color: 'red'; 
      }; 
     } 
     if (zoomLevel > 14) { 
      return (
       <GeoJSON 
        id={id} 
        data={geoJSON} 
        style={style} 
        onClick={() => { 
         this.props.selectPlot(id); 
        }} 
       /> 
      ); 
     } 
     return (
      <Marker 
       id={id} 
       className="marker" 
       position={markerPosition} 
       onClick={() => { 
        this.props.selectPlot(id); 
       }}> 
       <Popup> 
        <span>{name}</span> 
       </Popup> 
      </Marker> 
     ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
     selectedPlot: state.plots.selectedPlot, 
     plotBeingEdited: state.plots.plotBeingEdited, 
     zoomLevel: state.plots.zoomLevel 
    }; 
} 

export default connect(mapStateToProps, actions)(PlotMarker); 

Answer 1

확인, 그것을 얻었다. 스타일 기능을 정의하는 방식과 관련이 있습니다. 이 작동하지 않습니다

let style =() => { 
     color: 'blue'; 
    }; 
    if (selectedPlot === id) { 
     style =() => { 
      color: 'red'; 
     }; 
    } 
    if (zoomLevel > 14) { 
     return (
      <GeoJSON 
       id={id} 
       data={geoJSON} 
       style={style} 
       onClick={() => { 
        this.props.selectPlot(id); 
       }} 
      /> 
     ); 
    } 

이 작동 :

let style =() => { 
      return { 
       color: 'blue' 
      }; 
     }; 
     if (selectedPlot === id) { 
      style =() => { 
       return { 
        color: 'red' 
       }; 
      }; 
     } 
     if (zoomLevel > 14) { 
      return (
       <GeoJSON 
        id={id} 
        data={geoJSON} 
        style={style} 
        onClick={() => { 
         this.props.selectPlot(id); 
        }} 
       /> 
      ); 
     }