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 以獲取“真實”渲染，然后組件進行渲染。

在這種情況下，有沒有辦法因此刷新或重新加載加載 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>}