React Leaflet: setting a GeoJSON's style dynamically

问题

I'm trying to change a GeoJSON component's style dynamically based on whether its ID matches a selector.

The author of the plugin refers to the Leaflet documentation, which says that the style should be passed as a function. Which I'm doing, but no dice.

My component:

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

回答1:

OK, got it. It had to do with the way I was defining the style function. This doesn't work:

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

This works:

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

来源：https://stackoverflow.com/questions/47888817/react-leaflet-setting-a-geojsons-style-dynamically