Mapbox:How 在地图的加载事件中访问 React 的组件道具

Question

我正在尝试向 mapbox 地图添加一些图层。

componentDidMount() {
        this.map = new mapboxgl.Map({
            container: this.mapContainer,
            style: "#my_url_style#",
            center: [this.state.lng, this.state.lat],
            zoom: this.state.zoom
        });

        this.map.on("load", function(){
            this.map.addLayer(this.props.dataLayers[0]);
        });
    }

但是，如您所见，我的图层是由 prop 提供给组件的。由于加载函数是在不同的上下文中执行的，所以我无法访问 this.props...

有什么办法可以解决这个问题吗？

Answer 1

将函数更改为箭头函数。代码看起来像

 this.map.on("load", function(){
            this.map.addLayer(this.props.dataLayers[0]);
        });

至

this.map.on("load", ()=>{
        console.log("load is working perfectly.");
            this.map.addLayer(this.props.dataLayers[0]);
        });

Mapbox:How 在地图的加载事件中访问 React 的组件道具

Mapbox:How to access to react's component props on map's loaded event

layer

mapbox

reactjs