Reactjs 如何在geojson层中手动控制react传单弹出窗口（通过道具）？

我正在使用react传单呈现具有点和线字符串的geojson功能集合：

我能够让实际功能本身上的点击和悬停事件正常工作。但我希望能够将鼠标悬停在列表项上（与地图上的项目相关），并打开弹出窗口。我一直在整理文档，github，并尝试不同的东西。但似乎没有办法做到这一点。或者，我必须手动提交我的链接和点。使用<代码> < p>可以考虑<代码> GejJSON< /Cult>组件，例如：

const GeoJSONWithLayer = props => {
  const handleOnEachFeature = (feature, layer) => {
    let popupContent = "";
    if (props.popupContent.length) popupContent = props.popupContent;
    else if (feature.properties && feature.properties.popupContent) {
      popupContent = feature.properties.popupContent;
    }

    layer.bindPopup(popupContent);
    layer.on({
      mouseover: e => {
        layer.openPopup();
      },
      mouseout: e => {
        layer.closePopup();
      }
    });
  };
  return <GeoJSON {...props} onEachFeature={handleOnEachFeature} />;
}


GeoJSONWithLayer.defaultProps = {
  popupContent: '',
}

const GeoJSONWithLayer=props=>{
常量handleOnEachFeature=（要素，图层）=>{
让popupContent=“”；
如果（props.popupContent.length）popupContent=props.popupContent；
else if（feature.properties&&feature.properties.popupContent）{
popupContent=feature.properties.popupContent；
}
layer.bindPopup（弹出内容）；
分层({
鼠标悬停：e=>{
layer.openPopup（）；
},
mouseout:e=>{
layer.closePopup（）；
}
});
};
回来
}
GeoJSONWithLayer.defaultProps={
弹出内容：“”，
}

它支持传递额外的道具和默认属性，并包含层的弹出绑定逻辑。现在可以这样使用它：

const MapExample = props => {
  const style = () => ({
    color: "green",
    weight: 20
  });

  const freeBus = {
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        geometry: {
          type: "LineString",
          coordinates: [
            [-105.00341892242432, 39.75383843460583],
            [-105.0008225440979, 39.751891803969535],
            [-104.99820470809937, 39.74979664004068],
            [-104.98689651489258, 39.741052354709055]
          ]
        },
        properties: {
          popupContent:
            "This is a free bus line that will take you across downtown.",
          underConstruction: false
        },
        id: 1
      }
    ]
  };

  return (
    <Map zoom={14} center={{ lat: 39.74739, lng: -105 }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <GeoJSONWithLayer
        popupContent={"Some content goes here..."}
        data={freeBus}
        style={style}
      />
    </Map>
  );
};

const-MapExample=props=>{
常量样式=（）=>({
颜色：“绿色”，
体重：20
});
常数freeBus={
类型：“FeatureCollection”，
特点：[
{
键入：“功能”，
几何图形：{
键入：“LineString”，
坐标：[
[-105.00341892242432, 39.75383843460583],
[-105.0008225440979, 39.751891803969535],
[-104.99820470809937, 39.74979664004068],
[-104.98689651489258, 39.741052354709055]
]
},
特性：{
弹出内容：
“这是一条免费的巴士线，可以带你穿过市区。”，
欠构造：false
},
身份证号码：1
}
]
};
返回(
);
};

没有意识到您可以这样做。非常有趣…谢谢你的回答。嘿@Vadim，这是一个有趣的模式，但我不认为这是我需要的。我希望能够从一个特性中完全分离出一些东西，并将它排在弹出窗口……@凯尔，罗杰，也许你可以考虑创建一个新的问题。如果我希望弹出窗口包含一个反作用的组件（而不是文本）呢？@凯蒂Leal. BdPopUp（RecDeDistServer，ReDeNoStrut（））；你解决了这个问题吗？

const GeoJSONWithLayer = props => {
  const handleOnEachFeature = (feature, layer) => {
    let popupContent = "";
    if (props.popupContent.length) popupContent = props.popupContent;
    else if (feature.properties && feature.properties.popupContent) {
      popupContent = feature.properties.popupContent;
    }

    layer.bindPopup(popupContent);
    layer.on({
      mouseover: e => {
        layer.openPopup();
      },
      mouseout: e => {
        layer.closePopup();
      }
    });
  };
  return <GeoJSON {...props} onEachFeature={handleOnEachFeature} />;
}


GeoJSONWithLayer.defaultProps = {
  popupContent: '',
}

const MapExample = props => {
  const style = () => ({
    color: "green",
    weight: 20
  });

  const freeBus = {
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        geometry: {
          type: "LineString",
          coordinates: [
            [-105.00341892242432, 39.75383843460583],
            [-105.0008225440979, 39.751891803969535],
            [-104.99820470809937, 39.74979664004068],
            [-104.98689651489258, 39.741052354709055]
          ]
        },
        properties: {
          popupContent:
            "This is a free bus line that will take you across downtown.",
          underConstruction: false
        },
        id: 1
      }
    ]
  };

  return (
    <Map zoom={14} center={{ lat: 39.74739, lng: -105 }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <GeoJSONWithLayer
        popupContent={"Some content goes here..."}
        data={freeBus}
        style={style}
      />
    </Map>
  );
};