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

其他控件相同