React + mapbox-gl：包括弹出窗口？

Question

I'm using mapbox-gl in React, and while mapbox-gl is working fine, I'm having trouble figuring out how to integrate mapbox-gl's Popups. I have the let Popup function, but don't know how to implement it.

renderMap() {
    if (this.props.bird.location) {
        let birdLocation = this.props.bird.location;
        let map = new mapboxgl.Map({
            container: 'mapbox-container',
            style: config.mapbox.style,
            center: birdLocation,
            zoom: 13,
            interactive: false,
            preserveDrawingBuffer: true
        });
        let popup = new mapboxgl.Popup({
            setLngLat: [-96, 37.8],
            setHTML: '<h1>Hello World!</h1>',
            addTo: map
        });

        map.on('load', function () {
            map.addSource("points", {
                "type": "geojson",
                "data": {
                    "type": "FeatureCollection",
                    "features": [{
                        "type": "Feature",
                        "geometry": {
                            "type": "Point",
                            "coordinates": birdLocation
                        },
                        "properties": {
                            "icon": "dark-map-pin"
                        }
                    }]
                }
            });

            map.addLayer({
                "id": "points",
                "type": "symbol",
                "source": "points",
                "layout": {
                    "icon-image": "{icon}"
                }
            });
        });
    }
},

Answer 1

Figured it out.

let popup = new mapboxgl.Popup()
    .setLngLat()
    .setHTML(
        '<div>lorem ipsum blah blah</div>'
    )
    .addTo(map);