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以获得“真实”渲染，然后组件呈现。

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

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

感谢

Answer 1

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

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

或更好

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

OpenLayers React JSX组件

1 个答案: