ReactJS with Leaflet: плитки отображаются неправильно до обновления страницы

Question

Я создаю приложение с использованием Semantic UI и ReactJS. Я использую модуль табуляции, чтобы содержать мою карту, которая использует библиотеку Javascript Leaflet для отображения карты.

Проблема в том, что плитки отображаются неправильно до тех пор, пока страница не будет изменена.

является то, что я пробовал:

MapComponent = React.createClass({ 
    componentDidMount() { 
    let map = L.map('map') 
    L.tileLayer.provider('Thunderforest.Outdoors').addTo(map) 
    map.setView([lat, long], zoom) 
    map.invalidateSize(false) 
    } 
} 

Который, похоже, не решить эту проблему.

Я попытался установить тайм-аут, так как:

MapComponent = React.createClass({ 
    componentDidMount() { 
    let map = L.map('map') 
    L.tileLayer.provider('Thunderforest.Outdoors').addTo(map) 
    Meteor.setTimeout(() => { 
     map.invalidateSize(false) 
    }, 2000) 
    map.setView([lat, long], zoom) 
    } 
}) 

Который иногда работал, установив таймер на 2000, но иногда это необходимо, чтобы быть установлен в 5000, который является немного сумасшедшим, на мой взгляд.

Из того, что я прочитал, вызов функции invalidateSize() должен устранить проблему. Любая помощь в решении этой проблемы была бы весьма признательна. Спасибо.

Answer 1

Позвоните invalidateSize после того, как откроется вкладка, содержащая вашу карту. В закладке модуля Semantic UI, вы можете сделать это с помощью onVisible обратного вызова:

Вызывается после вкладки становится видимым

http://semantic-ui.com/modules/tab.html#/settings

<div class="ui menu top"> 
    <a class="item" data-tab="map">Map</a> 
</div> 

$('.top.menu .item').tab({ 
    'onVisible': function() { 
     // Do stuff 
    } 
});