使程序生成的地图无效答案

【问题标题】：Invalidate proceduraly generated maps使程序生成的地图无效
【发布时间】：2018-01-07 02:02:32
【问题描述】：

我需要使页面加载后生成的一些 react-leaflet 映射无效：

maps = [];
mapData = mapData.map(function(assetf,index){
    return(
      assetf.map(function(asset, index){
        var ind = index;
        var indHash = "#" + ind;
        var indExtra = ind + "ex";
        maps.push(indExtra);
        return(
          <li key={ind}>
            <div>{asset.description}</div>
            <Map id={indExtra} style={mapStyles} center={asset.point.coordinates} zoom={7}>
            <TileLayer
            url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            />

            </Map>
          </li>
        )
      })
    )
  });

我尝试使用此代码：

  var i;
  for(i=0; i < maps.length; i++){
      maps[i].invalidateSize(true);
  }

但是抛出了这个错误：

Uncaught (in promise) TypeError: maps[i].invalidateSize is not a function

谢谢，埃德。

【问题讨论】：

标签： jquery node.js reactjs leaflet react-leaflet

【解决方案1】：

您将地图 ID 推送到数组中，而不是传单地图。这就是为什么您不能仅在一个字符串上调用任何 Leaflet API 函数（在您的情况下是 invalidateSize）。

不要给地图ID，而是给它一个ref 喜欢：

<Map ref={indExtra} style={mapStyles} center={asset.point.coordinates} zoom={7}>

然后使用您存储在 maps 数组中的 refs id 来访问 refs 并使它们无效。不要忘记也使用leafletElement。

 var i;
  for(i=0; i < maps.length; i++){
      this.refs[maps[i]].leafletElement.invalidateSize(true);
  }

【讨论】：