React with MapBox GL:如何在ComponentDidMount()方法中添加源？

import React, { Component } from 'react';
import mapboxgl from 'mapbox-gl';

class Map extends Component {
  constructor(props) {
    super(props);
    this.map = null;
  }

  componentDidMount() {
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    this.map = new mapboxgl.Map({
      container: this.mapContainer,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [lng, lat],
      zoom: 12
    });

    this.map.on('load', () => {
      this.map.addSource('your-source-name', {
        type: 'geojson',
        data: 'your-data-url'
      });

      this.map.addLayer({
        id: 'your-layer-id',
        type: 'fill',
        source: 'your-source-name',
        paint: {
          'fill-color': '#f00'
        }
      });
    });
  }

  render() {
    return <div ref={el => (this.mapContainer = el)} />;
  }
}

export default Map;