#782·recompose

获取生命周期组件 DidMount 卸载错误

作者: Yingli40604345创建于 2019年8月16日更新于 2020年6月11日

import React, { Component } from 'react';

import { withGoogleMap, GoogleMap, withScriptjs, Marker, InfoWindow } from "react-google-maps"; import { compose, withProps, withStateHandlers, lifecycle } from "recompose";

import Constants from '../Constants'; import MapMarker from './MapMarker';

const CardTransactionMapRGMs = compose( withProps({ googleMapURL: https://maps.googleapis.com/maps/api/js?key=${Constants.GOOGLE_MAP_API_KEY}&libraries=geometry,drawing,places, loadingElement: <div style={{ height: 100% }} />, containerElement: <div style={{ height: "70vh", width: "100%" }} />, mapElement: <div style={{ height: "100%" }} /> }), withStateHandlers( props => ({ infoWindows: props.geo.map(p => { return { isOpen: false }; }) }), { onToggleOpen: ({ infoWindows }) => selectedIndex => ({ infoWindows: infoWindows.map((iw, i) => { iw.isOpen = selectedIndex === i; return iw; }) }) } ),

lifecycle({ componentDidMount() {

  this.setState({

    zoomToMarkers: map => {
      //console.log("Zoom to markers");
      const bounds = new window.google.maps.LatLngBounds();
      map.props.children.forEach((child) => {
        if (child.type === Marker) {
          bounds.extend(new window.google.maps.LatLng(child.props.position.lat, child.props.position.lng));
        }
      })
      map.fitBounds(bounds);
    }
  })
},

}),

withScriptjs, withGoogleMap )(props => ( { props.geo && props.geo.map((geo, i) => {

    return (
      <Marker
        id={geo.id}
        key={geo.id}
        position={{ lat: geo.lat, lng: geo.lng }}
        title="Click to zoom"
        onClick={props.onToggleOpen.bind(this, i)}
      >
        {props.infoWindows[i].isOpen && (

内容来源: acdlite/recompose