Question

我正在尝试访问react传单上下文，但我不知道它是如何工作的

这是我尝试过的：

import { Map, TileLayer, Marker, Popup, LeafletContext } from 'react-leaflet';

...

render() {
    <Map 
        center={position} 
        zoom={zoomInit}
        onClick={this.handleClick}
        ref={this.mapRef}
        whenReady={this.mapReady}
    >
    <TileLayer id='id' accessToken='accessToken' attribution="attribution" url="url"/>
    <LeafletContext.LeafletConsumer>
        {
            map => console.log(map)
        }
    </LeafletContext.LeafletConsumer>
    </Map>

我想知道如何导入LeafletContext吗？

然后我想了解如何获取地图参考？

我想访问它，因为doc表示它可以访问地图。我试图通过react ref访问map，但是可用性有些随机。

constructor(props) {
    super(props)
    setTimeout(this.test, 1000)
}


componentDidMount () {
    console.log(this.mapRef.current); // undefined

}


mapReady = () => {
    console.log(this.mapRef) // undefined
}

test() {
    console.log(this.mapRef.current.leafletElement) // Ok, shows map object
}

Answer 1

如react-leaflet documentation

中所述

上下文提供者和使用者被导出为LeafletProvider和LeafletConsumer

您需要导入LeafletConsumer（而不是LeafletContext）

<List />

此外，上下文对象具有以下形状

import { LeafletConsumert } from 'react-leaflet';

所以您需要在渲染方法中像这样使用它

type LeafletContext = {
  map?: Map,
  pane?: ?string,
  layerContainer?: ?LayerContainer,
  popupContainer?: ?Layer,
}

如何使用反应传单上下文？

1 个答案: