尝试将一些标记渲染到我的 mapbox 地图，但似乎无法渲染标记。我怀疑这是 .addTo 方法的问题，但我不知道我还要传入什么。我试过 this.mapContainer、document.getElementById('app')（我的主 div）和 this.map，但它们都无法渲染标记。不知道是我传递给 .addTo 的参数还是其他原因。

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

      //get geojson data
      fetch('/geojson')
      .then(res => res.json())
      .then(data => {
        this.createMarkers(map, data);
      })
   }

    createMarkers(map, jsonData) {
      jsonData.features.forEach(marker => {
      let el = document.createElement('div');
      el.className = 'marker';

      new mapboxgl.Marker(el)
        .setLngLat(marker.geometry.coordinates)
        .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
        .setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
        .addTo(map);
      })
    }

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