單張ReactJS地圖不完全顯示瓷磚

Question

嗨我試圖創建一個模式內的地圖。但地圖只是部分顯示。在創建節點後，我試過invalidatingSIze（），但它似乎不起作用。謝謝！

 

    import React from 'react'; 
    import ReactDOM from 'react-dom' 
    import L from 'leaflet'; 

    class Mapa extends React.Component { 
     constructor(props){ 
      super(props); 
      this.state = { 
      }; 
     } 

     createMap(element){ 
      var map = L.map(element); 
      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
       attribution: '© OpenStreetMap contributors' 
      }).addTo(map); 
      return map; 
     } 

     setupMap(){ 
      this.map.setView([this.props.lat, this.props.lon], this.props.zoom); 
      this.map.invalidateSize(); 
     } 

     componentDidMount(){ 
      let self = this; 
      if (this.props.createMap) { 
       this.map = this.props.createMap(ReactDOM.findDOMNode(self)); 
      } else { 
       this.map = this.createMap(ReactDOM.findDOMNode(self)); 
      } 

      this.setupMap(); 
     } 

     render(){ 
      /*Returns div with id map*/ 
     } 
    } 

Answer 1

最後我固定的。代碼是正確的，但我沒有正確添加傳單依賴關係。一旦我確定所有工作都完美無缺。其實this.map.invalidateSize（）;沒有必要。

 
    import React from 'react'; 
    import ReactDOM from 'react-dom' 
    import L from 'leaflet'; 

    class Mapa extends React.Component { 
     constructor(props){ 
      super(props); 
      this.state = { 
      }; 
     } 

     createMap(element){ 
      var map = L.map(element); 
      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
       attribution: '© OpenStreetMap contributors' 
      }).addTo(map); 
      return map; 
     } 

     setupMap(){ 
      this.map.setView([this.props.lat, this.props.lon], this.props.zoom); 
     } 

     componentDidMount(){ 
      let self = this; 
      if (this.props.createMap) { 
       this.map = this.props.createMap(ReactDOM.findDOMNode(self)); 
      } else { 
       this.map = this.createMap(ReactDOM.findDOMNode(self)); 
      } 

      this.setupMap(); 
     } 

     render(){ 
      /*Returns div with id map*/ 
     } 
    } 

Answer 2

我這樣做是使用JSS：

import jss from 'jss'; 
import jssDefault from 'jss-preset-default'; 

import 'leaflet/dist/leaflet.css'; 

jss.setup(jssDefault()); 

jss.createStyleSheet({ 
    '@global': { 
    '.leaflet-container': { 
     height: '100%', 
    }, 
    }, 
}).attach(); 

單張使用全局CSS類。所以，你可以使用css-loader只需使用全局樣式：

styles.css：

:global { 
    .leaflet-container { 
    height: 100%; 
    } 
} 

component.jsx：

import './styles.css';