React-листовка всплывающего окна geo json onEachFeature с настраиваемым компонентом реакции - PullRequest
Новая
       57

React-листовка всплывающего окна geo json onEachFeature с настраиваемым компонентом реакции

1 голос
/ 14 марта 2020

Я пытаюсь отобразить пользовательский компонент реакции в всплывающем окне Geo JSON onEachFeature, например, запустить модал со всеми соответствующими feature.properties. В всплывающем компоненте реакционной листовки он прекрасно работает 

<Popup>
   Some text
   <Another React Component />
</Popup>

Но функция onEachFeature для Geo JSON выглядит следующим образом: 

onEachFeature(feature, layer) {
    const popupContent = `
        <div>
            <p>${feature.properties.name}</p>                  
        </div>
            `;
        layer.bindPopup(popupContent);
        }

popupContent - это код html, и я не знаю, как включить реагирующий компонент в нем. Нужна помощь! Спасибо!

1 Ответ

1 голос
/ 14 марта 2020

Вы можете использовать ReactDOMServer.renderToString, см. здесь , чтобы иметь возможность иметь пользовательский всплывающий компонент и отображать его, используя layer.bindPopup, передавая функцию как проп или любую другую опору, которую вы хотите.

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

const Popup = ({ feature }) => {
  let popupContent;
  if (feature.properties && feature.properties.popupContent) {
    popupContent = feature.properties.popupContent;
  }

  return (
    <div>
      <p>{`I started out as a GeoJSON  ${
        feature.geometry.type
      }, but now I'm a Leaflet vector!`}</p>
      {popupContent}
    </div>
  );
};

, а затем используйте его внутри onEachFeature вместе с ReactDOMServer.renderToString

const onEachFeature = (feature, layer) => {
    const popupContent = ReactDOMServer.renderToString(
      <Popup feature={feature} />
    );
    layer.bindPopup(popupContent);
  };

Правка После предоставления Для получения дополнительной информации я изменил код так:

  1. создайте модальный только для примера и передам его состояние, функцию переключения и выбранную функцию.

  2. итерации по geo json и создание компонента реагирования-листовки FeatureGroup вместо использования GeoJSON и прослушивания события onEachFeature, передавая дочерние реакции-листовки Popup составная часть. Внутри вы можете иметь кнопку с нужным событием onClick. Этим способом можно решить проблему со статусом c html. Создайте маркер, затем нажмите кнопку и включите модальный режим. Как только вы нажмете кнопку, вы сохраните выбранную ссылку на функцию.

  3. Если вы хотите расширить пример, чтобы охватить все возможные типы геометрии, вы можете проверить свойство геометрии и на основе этого круга визуализации или другого элемента.

Я также обновил демо. Я надеюсь, что это может помочь вам больше сейчас.

Демо

...