OpenLayers React JSX 组件

Question

我有以下使用 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);

当我取消注释 render() 中的以下行时，加载失败：

//if(this.props.contentRender) {

//}else{return false}

这两行的目的。此 React 组件在加载仪表板时加载。然后组件监听 Redux 以进行 "true" 渲染，然后组件渲染。

有没有办法在这种情况下刷新或重新加载加载 openlayers。我在 componentDidMount() 中尝试了一些想法，比如 .render() 等

注意：如果有更好的方法来动态加载组件，我会很感兴趣。

谢谢

Answer 1

您的 render 方法需要始终 return 一些有效的 html 标记或 React 组件或 null。您应该将代码更改为

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

或更好

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

OpenLayers React JSX 组件

OpenLayers React JSX Component

javascript

openlayers

reactjs