javascript - React-leaflet 自定义组件，如何从 Leaflet 扩展 Polyline？

Question

我正在尝试扩展一个 react-leaflet 组件，以便我可以向它添加自定义变量。

我需要向折线添加一个“id”(这样当用户点击它时，我可以检索该 id 并在后面调用服务器以收集其上的数据)。我必须对标记做同样的事情，并找到了这个解决方法:

markers = nextProps.buses.map((bus, i) => {
  let iconCustom = new L.Icon.Default({internalId: bus.internalId});
  this.markersDirectAccess[bus.internalId] = {
    ...bus
  };

  return {
    lat: bus.latitude,
    lng: bus.longitude,
    popup: bus.busId,
    options: {icon: iconCustom}
  }
});

我不确定这样做是否正确。但是当涉及到 Polyline 组件时，我被卡住了。我找到了 this answer我想将它应用到 react-leaflet 但我不知道该怎么做。这是我的扩展组件的当前状态:

import L from 'leaflet'
import { Polyline } from 'react-leaflet'
import PropTypes from 'prop-types';


export default class PolylineCustomId extends Polyline {
  static propTypes = {
    positions:  PropTypes.array,
  }

  createLeafletElement (props: Object): Object {
    return L.Polyline(props)
  }
}

Answer 1

我认为您不需要为此定制组件。您可以简单地为每条将返回其 ID 的多段线添加一个点击处理程序。看这个例子:

render () {
  const position = [this.state.lat, this.state.lng]
  return (
    <Map center={position} zoom={this.state.zoom}>
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
      />
      {this.state.polylines.map(polyline => 
          <Polyline
            key={polyline.id}
            positions={polyline.coords}
            onClick={() => alert('clicked ' + polyline.id)}
            />
        )
      }
    </Map>
  )
}

这是一个带有工作示例的 jsfiddle:https://jsfiddle.net/31euue73/1/