在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/

同其他控件