Листовка React: динамическая настройка стиля многоугольника

Как программно изменить цвет полигона?

Решение, которое я использовал для 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);
                }}
            />
        );
    }

person Boris K    schedule 01.01.2018    source источник
comment
Какую библиотеку полигонов вы используете? Возможно, вам нужно передать реквизит «заполнить». ref -› github.com/peteroid/react-polygon#basic   -  person Fawaz    schedule 01.01.2018
comment
Я импортирую Polygon из React-Leaflet   -  person Boris K    schedule 01.01.2018
comment
передать цветовую опору напрямую: ‹Цвет полигона=красный /›   -  person Fawaz    schedule 01.01.2018
comment
Это работает: color={selectedPlot === id? 'красный' : 'синий'} Если вы хотите добавить к нему ответ, я приму его.   -  person Boris K    schedule 01.01.2018
comment
Рад, что помогло :)   -  person Fawaz    schedule 01.01.2018


Ответы (1)


Передайте цветовую опору как объект:

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