React Component ruckelt nicht, aber es gibt keine Fehlermeldungen

Question

Ich habe mit einem react-google-maps-Paket (https://github.com/tomchentw/react-google-maps) gespielt. Die Komponente verbindet sich erfolgreich mit Maps-API, da ich verschiedene Konsolenwarnungen erhalte an den Schlüssel, aber nichts rendert - und es gibt keine Fehlermeldungen. Fehle ich etwas Offensichtliches?

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {GoogleMap, Loader, Marker} from "react-google-maps"; 
import { default as ScriptjsLoader } from "react-google-maps/lib/async/ScriptjsLoader"; 

export default class MapComponent extends React.Component { 

    constructor() { 
    super(); 
    this.state = { 
     markers: [{ 
     position: { 
      lat: 25.0112183, 
      lng: 121.52067570000001, 
     }, 
     key: `Taiwan`, 
     defaultAnimation: 2, 
     }] 
    } 
} 

/* 
    * This is called when you click on the map. 
    * Go and try click now. 
    */ 
handleMapClick(event) { 
    let { markers } = this.state; 
    markers = update(markers, { 
    $push: [ 
     { 
     position: event.latLng, 
     defaultAnimation: 2, 
     key: Date.now() 
     }, 
    ], 
    }); 
    this.setState({ markers }); 

    if (markers.length === 3) { 
    this.props.toast(
     `Right click on the marker to remove it`, 
     `Also check the code!` 
    ); 
    } 
} 

handleMarkerRightclick(index, event) { 
    /* 
    * All you modify is data, and the view is driven by data. 
    * This is so called data-driven-development. (And yes, it's now in 
    * web front end and even with google maps API.) 
    */ 
    let { markers } = this.state; 
    markers = update(markers, { 
    $splice: [ 
     [index, 1], 
    ], 
    }); 
    this.setState({ markers }); 
} 

renderNewBehavior() { 
    return (
    <ScriptjsLoader 
     hostname={"maps.googleapis.com"} 
     pathname={"/maps/api/js"} 
     query={{libraries: `geometry,drawing,places` }} 
     loadingElement={ 
     <div {...this.props} style={{ height: `100%` }}> 
     LOADING 
     </div> 
     } 
     containerElement={ 
     <div {...this.props} style={{ height: `100%` }} /> 
     } 
     googleMapElement={ 
     <GoogleMap 
      ref={googleMap => { 
      if (!googleMap) { 
       return; 
      } 
      console.log(googleMap); 
      console.log(`Zoom: ${ googleMap.getZoom() }`); 
      console.log(`Center: ${ googleMap.getCenter() }`); 
      }} 
      defaultZoom={3} 
      defaultCenter={{ lat: -25.363882, lng: 131.044922 }} 
      onClick={this.handleMapClick} 
     > 
      {this.state.markers.map((marker, index) => { 
      return (
       <Marker 
       {...marker} 
       onRightclick={this.handleMarkerRightclick.bind(this, index)} 
       /> 
      ); 
      })} 
     </GoogleMap> 
     } 
    /> 
    ); 
} 

render() { 
return this.renderNewBehavior() 
} 

} 
export default MapComponent 

Answer 1

Ich reparierte diese durch die enthaltende Div Element auf 'style = {{height: ' 500px'}' Ich bin mir nicht sicher, warum dies funktioniert, aber es tat!