在React-Leaflet庫中爲<Map>組件設置選項的正確方法是什麼？

Question

React-Leaflet documentation指定某些動態屬性可以通過道具來設置。但是，有many other Leaflet properties/methods是可定製的......需要注意的是，爲了訪問它們，您需要直接與Leaflet實例交互（React-Leaflet文檔中的mentioned here）。

我一直沒能找到如何正確地做到這一點任何的例子，但我還是設法得到它的工作：

JSFiddle Example

class SimpleExample extends React.Component { 

    ... 

    componentDidMount(){ 
    this.L.doubleClickZoom.disable(); 
    this.L.zoomControl.setPosition('topright'); 
    } 

    render() { 
    return <Map ref={(ref) => this.L = ref.getLeafletElement()} /> 
    } 

} 

這是做到這一點的最好辦法？

Answer 1

你應該做的是這樣的：

<Map center={position} zoom={this.state.zoom} zoomControl={false} doubleClickZoom={false}> 
    <ZoomControl position='topright' /> 
    <TileLayer 
     attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
     url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' 
    /> 
    <Marker position={position}> 
     <Popup> 
     <span>A pretty CSS3 popup. <br/> Easily customizable.</span> 
     </Popup> 
    </Marker> 
</Map> 

https://jsfiddle.net/n4emj929/

同其他控件