javascript - ReactJS 与传单 : tiles not correctly displayed until page refresh

Question

我正在使用 Semantic UI 和 ReactJS 构建一个应用程序。我使用选项卡模块来包含我的 map ，该模块使用 Leaflet Javascript 库来渲染 map 。

问题在于，在调整页面大小之前，图 block 无法正确显示。

这是我尝试过的:

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

包含 map 的选项卡可见后，调用 invalidateSize。在 Semantic UI 的选项卡模块中，您可以使用 onVisible 回调来做到这一点:

Called after a tab becomes visible

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
    }
});