React Leaflet：动态设置多边形的样式

Question

如何以编程方式更改多边形的颜色？

我用于 GeoJSON 的解决方案不起作用。虽然当我检查元素时，我可以看到

style:{color: "red"}

尽管如此，地图显示了一个蓝色的多边形。

这是我组件的相关部分：

render() {
    const {
        id,
        name,
        geoJSON,
        zoomLevel,
        selectedPlot,
        plotBeingEdited
    } = this.props;
    const markerPosition = position(geoJSON);

    let style = () => {
        return {
            color: 'blue'
        };
    };
    if (selectedPlot === id) {
        style = () => {
            return {
                color: 'red'
            };
        };
    }

    if (zoomLevel > 14 && plotBeingEdited === id) {
        return <PlotPolygon id={id} geoJSON={geoJSON} />;
    } else if (zoomLevel > 14) {
        return (
            <Polygon
                ref="plot"
                style={style()}
                id={id}
                positions={[positions(this.props)]}
                onClick={() => {
                    this.props.selectPlot(id);
                }}
            />
        );
    }

Answer 1

将颜色属性作为对象传递：

<Polygon
   ...
   color={selectedPlot === id ? 'red' : 'blue'}
/>

React Leaflet：动态设置多边形的样式

React Leaflet: setting a polygon's style dynamically

leaflet

reactjs

react-leaflet