OpenLayers는 JSX 구성 요소가 나는 다음과 같은 한

Question

이 Openlayers를 사용하여 구성 요소 반응 반응은 예상대로 작동합니다

import React from 'react'; 
import { connect } from 'react-redux' 
import PropTypes from 'prop-types' 
import { Card } from 'material-ui' 
import CardBanner from './CardBanner' 


// Open Layers Imports 
import ol from 'openlayers'; 
import 'ol/ol.css'; 


class WebMapService extends React.Component { 
    constructor(props) { 
     super(props) 

     this.map = {}; 
    } 


    componentDidMount() { 

     this.map = new ol.Map({ 
      layers: [ 
       new ol.layer.Tile({ 
        source: new ol.source.OSM() 
       }) 
      ], 
      target: 'map', 
      view: new ol.View({ 
       center: [0, 0], 
       zoom: 2 
      }) 
     }); 

     // this.map.updateSize(); 
     // this.map.render(); 
     // this.map.redraw(); 
    } 


    render() { 
     //if(this.props.contentRender) {  // Conditional Rendering 
     return (
      <div> 
       <Card id="WebMapService" className="cardContainerFullScreen"> 


        <div id="map" className="map" ref="olmap"></div> 


       </Card> 
      </div> 
     ) 
     //}else{return false} 
    } 
} 



WebMapService.propTypes = { 
    contentRender: PropTypes.bool 
}; 

const mapStateToProps = (state) => { 
    return { 
     contentRender: state.setWMSComponentStatus.setWMSComponentStatusState 
    } 
} 

export default connect(mapStateToProps)(WebMapService); 

나는 그것을로드 할 수 없습니다) (렌더링에서 다음 줄의 주석을 해제하는 경우 :

//if(this.props.contentRender) { 

//}else{return false} 

이 두 줄의 목적. 이 React Component는 대시 보드가로드 된 시점에로드됩니다. 구성 요소는 Redux에서 "true"렌더링을 수신 한 다음 구성 요소를 렌더링합니다.

이와 같은 상황에서로드 오픈 레이어를 새로 고침하거나 다시로드하는 방법이 있습니까? 나는 .render() 같은 componentDidMount()에서 몇 가지 아이디어를 시도했다.

참고 : 구성 요소를 빠르게로드하는 것이 더 좋다면 흥미가있다.

감사

Answer 1

귀하의 render 방법은 항상 어떤 유효한 HTML 마크 업을 반환하거나 구성 요소는 null 반응 할 필요가있다. 당신은 당신의 코드를 변경해야

if(this.props.contentRender) { 
... 
}else{return null} 

이상

if(this.props.contentRender) { 
... 
}else{return <div> Loading... </div>}