[英]OpenLayers React JSX Component
I have the following React Component that uses Openlayers and it works as expected:我有以下使用 Openlayers 的 React 组件,它按预期工作:
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);
When I uncomment the following lines from render() it fails to load:当我从 render() 中取消注释以下几行时,它无法加载:
//if(this.props.contentRender) {
//}else{return false}
Purpose of these 2 lines.这两行的目的。 This React Component is loaded at the point a dashboard is loaded.
在加载仪表板时加载此 React 组件。 The component then listens to Redux for a "true" render and then the component renders.
然后组件监听 Redux 以获取“真实”渲染,然后组件进行渲染。
Is there a way to therefore refresh or reload load openlayers in a situation like this.在这种情况下,有没有办法因此刷新或重新加载加载 openlayers。 I've tried a few ideas in componentDidMount() like .render() etc.
我在 componentDidMount() 中尝试了一些想法,比如 .render() 等。
Note: if there's a better way to load the component on the fly I'd be interested.注意:如果有更好的方法来动态加载组件,我会感兴趣。
thanks谢谢
Your render
method needs to always return some valid html markup or React components or null.您的
render
方法需要始终返回一些有效的 html 标记或 React 组件或 null。 You should change your code to您应该将代码更改为
if(this.props.contentRender) {
...
}else{return null}
or better或更好
if(this.props.contentRender) {
...
}else{return <div> Loading... </div>}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.