带有传单的ReactJS :直到页面刷新后才正确显示

Question

我正在使用语义UI和ReactJS构建一个应用程序。我使用一个选项卡模块来包含我的地图，它使用传单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。在Semantic的制表符模块中，您可以通过使用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
    }
});