带有自定义反应组件的 React-leaflet geojson onEachFeature 弹出窗口 [英] React-leaflet geojson onEachFeature popup with custom react component

问题描述

我正在尝试在 react-leaflet GeoJSON onEachFeature 弹出窗口中呈现自定义反应组件，例如使用所有相应的 feature.properties 触发模态.在弹出的 react-leaflet 组件中，它工作得很好

一些文字<另一个反应组件/></弹出窗口>

但是 GeoJSON 的 onEachFeature 函数看起来像这样

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

`;layer.bindPopup(popupContent);}

popupContent 是一个 html 代码，我不知道如何在其中包含 react 组件.需要帮忙！谢谢！

解决方案

可以使用 ReactDOMServer.renderToString，参见 here 能够拥有一个自定义的 Popup 组件并使用 layer.bindPopup 通过将功能作为道具或任何其他道具传递来呈现它想要.

创建一个弹出组件，例如:

const Popup = ({ feature }) =>{让弹出内容；if (feature.properties && feature.properties.popupContent) {popupContent = feature.properties.popupContent;}返回 (<div><p>{`我从 GeoJSON ${ 开始特征.几何.类型}，但现在我是一个 Leaflet 向量！`}</p>{弹出内容}

);};

然后在 onEachFeature 和 ReactDOMServer.renderToString

中使用它

const onEachFeature = (feature, layer) =>{const popupContent = ReactDOMServer.renderToString(<弹出功能={功能}/>);layer.bindPopup(popupContent);};

编辑提供更多信息后，我将代码更改为如下所示:

1. 仅为示例创建一个模态，并将其状态、切换功能和所选功能作为道具传递.

2. 遍历 geojson 并创建一个 FeatureGroup react-leaflet 组件，而不是使用 GeoJSON 并监听 onEachFeature 事件，通过作为子级 react-leaflet 的 Popup 组件传递.在那里，您可以拥有带有所需 onClick 事件的按钮.通过这种方式，可以克服静态 html 的问题.创建一个标记，然后单击按钮并启用模态.单击该按钮后，您将保存所选的特征参考.

3. 如果您想扩展示例以涵盖所有可能的几何类型，您可以检查几何属性并基于该渲染圆或其他元素.

我也更新了演示.我希望这现在可以帮助您更多.

演示

I am trying to render custom react component in react-leaflet GeoJSON onEachFeature popup, e.g. to fire modal with all corresponding feature.properties. In a popup react-leaflet component it works great

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

But onEachFeature function for GeoJSON looks like this

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

popupContent is a html code and I do not know how to include react component in it. Need help! Thank you!

解决方案

You can use ReactDOMServer.renderToString, see here to be able to have a custom Popup component and render it using layer.bindPopup by passing feature as prop or whatever other prop you want.

Create a Popup component like for instance:

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>
  );
};

And then use it inside onEachFeature along with ReactDOMServer.renderToString

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

Edit After giving more information I changed the code to be like this:

1. create a modal just for the sake of the example and pass as props its state, a toggle function and the selectedfeature.

2. iterate over the geojson and create a FeatureGroup react-leaflet component, instead of using GeoJSON and listen to onEachFeature event, by passing as children react-leaflet's Popup component. Inside there you could have your button with the desired onClick event. With this ways the problem with the static html can be overcome. A marker is created and then click the button and enable the modal. Once you click the button you save the selected feature reference.

3. If you want to extend the example to cover all possible geometry types you could check the geometry property and based on that render circle or another element.

I updated also the demo. I hope this can help you more now.

Demo

这篇关于带有自定义反应组件的 React-leaflet geojson onEachFeature 弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！