リーフレット：マップコンテナーが見つかりません

Question

ブラウザを介して地理位置情報を取得する以下のreactクラスがあります。

リーフレットマップをマッピングしています。地図をクライアントのブラウザの場所の領域に「ズーム」できるように、ジオロケーションをsetViewへの入力にしたいと考えています。

これが反応クラスです：

    import React from 'react';
    import L from 'leaflet';
    import countries from './countries.js'; 

    var Worldmap = React.createClass({

        render: function() {

            let geolocation = [];

            navigator.geolocation.getCurrentPosition(function(position) {
                let lat = position.coords.latitude;
                let lon = position.coords.longitude;
                geolocation.Push(lat, lon);
                locationCode()
            });

            function locationCode() {
                if(geolocation.length <= 0)
                    geolocation.Push(0, 0);
            }


            let map = L.map('leafletmap').setView(geolocation, 3);

            L.geoJSON(countries, {
                style: function(feature) {
                    return {
                        fillColor: "#FFBB78",
                        fillOpacity: 0.6,
                        stroke: true,
                        color: "black",
                        weight: 2
                    };
                }
            }).bindPopup(function(layer) {
                return layer.feature.properties.name;
            }).addTo(map);

            return (
                <div id="leafletmap" style={{width: "100%", height: "800px" }}/>
            )
        }
    });

    export default Worldmap

HTMLが<WorldMap />としてレンダリングされるメインファイルで呼び出されます。

ページの読み込み時にエラーUncaught Error: Map container not found.が発生します。見回すと、通​​常は、値が提供される前にマップがdivに表示されようとしているためです（この場合は（gelocation、3））。ただし、以下のレンダー関数から返される前に表示されるべきではありません。

問題は何でしょうか？

コンソールでgeolocationを印刷すると、座標が正しく取得されるため、問題はないようです。

Answer 1

Angularを使用している場合、これが役立つことを願っています。

const container = document.getElementById('map')
if(container) {
    // code to render map here...
}