, вызывающие действия сокращения из карты листовок

Question

У меня есть приложение реакции/сокращения, которое я добавил в карточку листовки. Карта буклета заполняется через geoJSON. Есть ли способ, который я могу назвать действием redux через пользователя, нажимает на функцию карты? Мне бы очень хотелось иметь возможность запускать действие, когда пользователь нажимает на всплывающее окно. Я хотел бы сохранить номер идентификатора функции, которую пользователь нажал, чтобы я мог запустить действие для извлечения данных и поместить их в хранилище, а затем открыть другую страницу с подробностями этой функции.

Это то, что я имею в листовке:

myLayer = L.geoJSON(features, { 
    //only points here 
    filter: function(feature, layer) { 
     return (feature.geometry.type == "Point"); 
    }, 
    //make each point a circle 
    pointToLayer: function (feature, latlng) { 
     return L.circleMarker(latlng, geojsonMarkerOptions); 
    }, 
    onEachFeature: function(feature, layer) { 
     //popup contents 
     var customPopup = `<div class='popuplink' > <-----user clicks 
      <p>${feature.properties.title}</p></div>`; 

     //popup options 
     var customOptions = 
     { 
      width: '72', //about 1 inch 
      className: 'custom' 
     }; 

     //create layer 
     layer.bindPopup(customPopup, customOptions); 

    } 


}); 
myLayer.addTo(map); 

Я пытался поставить в ссылке во всплывающем окне, что при нажатии идет на страницу я хочу. (Я использую в маршрутизаторе «агент-ретранслятор»). Примерно так:

 var customPopup = `<a href='/details/${feature.properties.id} > 
      <p>${feature.properties.title}</p></a>`; 

Но когда я это делаю, весь редукционный магазин INIT называется, и я теряю все. Может кто-нибудь объяснить мне, почему это происходит? Я понимаю, что листовки и реагируют каждый, поддерживая свое собственное государство. Но есть ли способ создать мост между ними, чтобы я мог вызывать действия с карты, не теряя моего магазина?

Answer 1

OK. На данный момент я нашел работу. Это не изящно, но это работает. Если кто-то скажет мне о лучшем решении, я бы хотел его услышать.

Я не могу вызвать страницу непосредственно с самой карты лифлета, потому что redux повторно инициализирует себя и все потеряно. Поэтому я должен назвать сокращение от чего-то, что уже НА ДОМЕ.

Я создал 2 скрытых поля на моей странице реагирования. Один - это поле ввода, в котором будет храниться идентификатор данных, которые я хочу извлечь. Вторая - кнопка, которая на самом деле вызывает создателя действия выборки. Когда кнопка «нажата», создатель действия находит id # в поле ввода и вызывает с ним действие. Затем действие выполняется и извлекает данные, а затем использует маршрутизатор оттуда, чтобы перейти на страницу сведений.

На самой карте, я создал всплывающее окно, как так:

onEachFeature: function(feature, layer) { 

    var popupId = 'info' + feature.properties.id; 

    //create a div element 
    var domElem = document.createElement('div'); 
    domElem.id = popupId; 

    //what popup will say 
    var newContent = document.createTextNode(feature.properties.title);  

    //add the text node to the newly created div. 
    domElem.appendChild(newContent); 

//create onclick event for popup 
domElem.onclick = function() { 

    //this points to input field on react container 
    var target = document.getElementById('featureId'); 

    //fill it with the id of the feature 
    target.value = feature.properties.id; 

    //now 'click' the button which calls redux 
    var btn = document.getElementById('goToDetails').click(); 
    } 


//create layer 
layer.bindPopup(domElem);