React-leaflet自定義組件，如何從Leaflet擴展Polyline？

我試圖擴展一個反應傳單組件，所以我可以添加自定義變量。React-leaflet自定義組件，如何從Leaflet擴展Polyline？

我需要給Polyline添加一個「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，我想將它應用於反應傳單，但我不知道如何去做。這是我擴展組件的當前狀態：

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

來源

2017-05-30 Clafou

我不認爲你需要爲此定製組件。您可以簡單地爲每條折線添加一個點擊處理程序，以返回其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/

來源

2017-05-31 14:31:29

這奏效了！我仍然想知道如何使用react-leaflet的反應生命週期來擴展一個傳單組件，但我會接受這個作爲答案，因爲它的工作原理:) – Clafou

React-leaflet自定義組件，如何從Leaflet擴展Polyline？

回答

相關問題