当包裹在类组件中时，无法显示React Google Maps Marker吗？

Question

我正在尝试创建一个React组件，该组件呈现一个google-maps-react标记以及一个信息窗口。我遇到的问题是，如果我尝试通过为地图容器创建子组件来渲染标记，则标记不会显示。但是，当我直接渲染标记时，它会显示。

这不起作用： 在该组件中执行console.log道具，生命周期方法表明它正在接收道具

 <MarkerWithInfoWindow
            position={{lat: 40.730610,
                lng: -73.935242}}
            onClick={this.onToggleOpen}>
            {this.state.isOpen && <InfoWindow onCloseClick={this.onToggleOpen}>
                <h3>{this.props.content}</h3>
            </InfoWindow>}
        </MarkerWithInfoWindow>   

但是渲染该方法有效（在地图上显示标记）：

        <Marker
            position={{lat: 40.730610,
                lng: -73.935242}}
            onClick={this.onToggleOpen}>
            {this.state.isOpen && <InfoWindow onCloseClick={this.onToggleOpen}>
                <h3>{this.props.content}</h3>
            </InfoWindow>}
        </Marker>   

这是我的完整代码。

import React, {Component} from 'react';
import {Map, GoogleApiWrapper, InfoWindow, Marker} from 'google-maps-react';
import MapData from './Map.js';


const mapStyles = {
    width: '100%',
    height: '100%'
};


export class MapContainer extends Component {
    state = {
        showingInfoWindow: false,
        activeMarker: {},
        markers: [],
        selectedPlace: {}
    }

    componentDidMount() {
        this.props.action(this.props.google);         
    }


    render() {   
        return (
            <MapData
            centerAroundCurrentLocation
            google={this.props.google}
            latitude={this.props.latitude}
            longitude={this.props.longitude}            
          >


        <MarkerWithInfoWindow
            position={{lat: 40.730610,
                lng: -73.935242}}
            onClick={this.onToggleOpen}>
            {this.state.isOpen && <InfoWindow onCloseClick={this.onToggleOpen}>
                <h3>{this.props.content}</h3>
            </InfoWindow>}
        </MarkerWithInfoWindow>   

          </MapData>


        );
    }

}

export default GoogleApiWrapper({
    apiKey: 'AIzaSyDAwpAKPFEuOpBRAG5nasTGhHeMHd20n7s'    
})(MapContainer);

class MarkerWithInfoWindow extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
          position: {lat: 40.730610,
            lng: -73.935242}
        }
        this.onToggleOpen = this.onToggleOpen.bind(this);
    }

    onToggleOpen() {
        this.setState({
            isOpen: !this.state.isOpen
        });
    }

    componentDidUpdate() {
        console.log(this.state.position);
    }

    render() {
        return (<Marker
            position={{lat: 40.730610,
                lng: -73.935242}}
            onClick={this.onToggleOpen}>
            {this.state.isOpen && <InfoWindow onCloseClick={this.onToggleOpen}>
                <h3>{this.props.content}</h3>
            </InfoWindow>}
        </Marker>)
    }
}

我正在尝试根据此示例创建此组件，但对我而言不起作用。感谢您的任何帮助！： https://stackblitz.com/edit/react-ejmqfg?file=MapWithAMarkers.js

这是我的Map.js类，以备不时之需

import React from 'react';
import PropTypes from 'prop-types';

const mapStyles = {
    map : {

        width: '100vw',
        height: '100vh',
    }
};

export class Map extends React.Component {
    constructor(props) {
        super(props);
        const {lat, lng} = this.props.initialCenter;
        this.state = {
            Map: {
                lat: lat,
                lng:lng 
            },
            locationSearch: false
        }
        this.mapRef = React.createRef();
    }

    componentDidUpdate(prevProps, prevState) {

        if(prevProps.google !== this.props.google) {
            this.loadMap();

        }

        if(prevProps.latitude !== this.props.latitude || prevProps.longitude !== this.props.longitude) {
         // console.log(prevProps.latitude, this.props.latitude);
          this.setState({
            Map: {
              lat: this.props.latitude,
              lng: this.props.longitude
            },
            locationSearch: true
          });


        }

        if(prevState.Map !== this.state.Map) {
            this.recenterMap();             

        }

    }
    recenterMap() {
        const map = this.map;
        const current = this.state.Map;

        const google = this.props.google;
        const maps = google.maps;

        if (map) {
          let center = new maps.LatLng(current.lat, current.lng);        
          map.panTo(center);
        }

      }


    componentDidMount() {

        if (this.props.centerAroundCurrentLocation) {  

          if (navigator && navigator.geolocation) {

            navigator.geolocation.getCurrentPosition(pos => {
              const coords = pos.coords;
              this.setState({
                Map: {
                  lat: coords.latitude,
                  lng: coords.longitude
                }
              });
            });
          }
        }
        this.loadMap();
      }


      loadMap() {
        if (this.props && this.props.google) {

          // checks if google is available
          const { google } = this.props;
          const maps = google.maps;

          //const mapRef = this.refs.map;

          // reference to the actual DOM element
         // const node = ReactDOM.findDOMNode(this.mapRef);

          let { zoom } = this.props;
          const { lat, lng } = this.state.Map;
          const center = new maps.LatLng(lat, lng);
          const mapConfig = Object.assign(
            {},
            {
              center: center,
              zoom: zoom,
              mapTypeControl: false

            }
          );

          // maps.Map() is constructor that instantiates the map
         this.map = new maps.Map(this.mapRef.current, mapConfig);

        }
      }

      renderChildren() {
        const { children } = this.props;
       // console.log(children);
        if (!children) return;

        return React.Children.map(children, c => {

          if (!c) return;
          return React.cloneElement(c, {
            map: this.map,
            google: this.props.google,
            mapCenter: this.state.Map
          });
        });
      }

      render() {
        const style = Object.assign({}, mapStyles.map);
       return (
         <div >
           <div style={style} ref={this.mapRef} >
             Loading map...
           </div>
           {this.renderChildren()}
         </div>
       );
     }
}




export default Map;

Map.defaultProps= {
    zoom:14,
    initialCenter : {
        lat: 40.730610,
        lng: -73.935242
    },
    centerAroundCurrentLocation: false,   
    visible: true
};

Map.propTypes = {
  google: PropTypes.object,
  zoom: PropTypes.number,
  initialCenter: PropTypes.object
}