javascript - 设置选项的正确方法是什么 component in the React-Leaflet library?

Question

React-Leaflet 文档指定可以通过 props 设置某些动态属性。但是，还有许多其他可自定义的 Leaflet 属性/方法......需要注意的是，为了访问它们，您需要直接与 Leaflet 实例进行交互（在 React-Leaflet 文档中提到）。

我无法找到如何正确执行此操作的任何示例，但我确实设法让它工作：

JSFiddle 示例

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/

其他控件也一样