Mapbox：如何在地图的加载事件上访问React的组件道具

Question

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

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]);
        });