React Leaflet: Einstellung eines GeoJSON-Stils dynamisch

Question

Ich versuche, den Stil einer GeoJSON Komponente dynamisch zu ändern, abhängig davon, ob ihre ID mit einem Selektor übereinstimmt. Der Autor des Plugins bezieht sich auf die Leaflet documentation, die besagt, dass der Stil als eine Funktion übergeben werden sollte. Was ich mache, aber keine Würfel.

Meine Komponente:

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

OK, bekam sie. Es hat damit zu tun, wie ich die Style-Funktion definiert habe. Dies funktioniert nicht:

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); 
       }} 
      /> 
     ); 
    } 

Dies funktioniert:

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); 
        }} 
       /> 
      ); 
     }