带有 Leaflet 的 ReactJS：直到页面刷新才正确显示图块

Question

我正在使用 Semantic UI 和 ReactJS 构建一个应用程序。我正在使用一个选项卡模块来包含我的地图，它使用 Leaflet Javascript 库来呈现地图。

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

这是我尝试过的：

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。在语义 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
    }
});