Открытое всплывающее окно с состоянием реквизита из Redux

Question

Я создаю сайт с большой главной картой. У меня есть несколько маркеров с всплывающими окнами, когда я нажимаю на создателей. Но теперь я хочу открыть всплывающее окно с внешним событием. Я использую избыточность для поддержания состояния маркеров, и я хотел бы открыть или нет всплывающее окно в зависимости от состояния создателя.

Нет атрибута open или isOpen во всплывающем компоненте в ответной листовке, например:

   <Marker position={[this.props.lat, this.props.lon]}>
        <Popup open={this.state.isOpen} >
            The popup content
        </Popup>
    </Marker>

и API Leaflet не предоставляют ничего лучшего ...

Мне уже удалось добавить прослушиватель событий onMouseOver с ref, как показано ниже, но не более.

class Poi extends Component{
    render(){
        return (
            <Marker position={[this.props.lat, this.props.lon]}
                    ref={marker=> { this.marker = marker }} 
                    onMouseOver={() => {s.marker.leafletElement.bindPopup('Popup content').openPopup();}}>
            </Marker>
    )
}

Спасибо за вашу помощь! PS: я действительно новичок, чтобы реагировать, поэтому, пожалуйста, будьте снисходительны: -)

Answer 1

Я наконец нашел быстрый и, возможно, грязный хак:

class Poi extends Component{
    componentDidUpdate(prevProps, prevState, snapshot) {
        if(this.props.isOpen === true){
            this.marker.leafletElement.bindPopup('popup content').openPopup()
        }
    }

    render(){
        return (
            <Marker position={[this.props.lat, this.props.lon]} ref={marker => { this.marker = marker }}>
            </Marker>
        )
    }
}

Но оно открывается только ОДНОМ всплывающем окне, даже если многие элементы помечены как open, и я потерял возможность нажимать на маркер ...: /

Answer 2

Хм, вы вообще хотите ассоциировать маркеры с всплывающими окнами? Как следует нажать на маркер, чтобы открыть всплывающее окно? Если ответ «нет», то самым простым способом «автоматического» открытия ваших всплывающих окон было бы перестать связывать их с маркерами.

вместо:

<Marker position={[this.props.lat, this.props.lon]}>
    <Popup>
        The popup content
    </Popup>
</Marker>

сделать:

<Marker position={[this.props.lat, this.props.lon]}/>
<Popup position={[this.props.lat, this.props.lon]}>
    The popup content
</Popup>

Если вы все еще хотите запускать всплывающие окна при нажатии на маркер, то я думаю, что вам лучше всего расширить класс react-leaflet Popup. Если вы отправите скрипку с минимальным рабочим примером вашей текущей проблемы, я могу вам в этом помочь.