javascript - 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 以获取“真实”渲染，然后该组件进行渲染。

在这种情况下，有没有一种方法可以刷新或重新加载 load 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>}