将React组件插入到Google地图信息窗口

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { GoogleMap, Marker, InfoWindow } from 'google-maps-react';

class MapWithInfoWindow extends React.Component {
  state = {
    showingInfoWindow: false,
    activeMarker: {},
    selectedPlace: {},
  };

  onMarkerClick = (props, marker) => {
    this.setState({
      selectedPlace: props,
      activeMarker: marker,
      showingInfoWindow: true,
    });
  };

  onClose = () => {
    if (this.state.showingInfoWindow) {
      this.setState({
        showingInfoWindow: false,
        activeMarker: null,
      });
    }
  };

  render() {
    const { selectedPlace, activeMarker, showingInfoWindow } = this.state;

    return (
      <GoogleMap>
        <Marker
          onClick={this.onMarkerClick}
          name="Marker"
          position={{ lat: 37.7749, lng: -122.4194 }}
        />
        <InfoWindow
          marker={activeMarker}
          visible={showingInfoWindow}
          onClose={this.onClose}
        >
          <div>
            {ReactDOMServer.renderToString(<YourReactComponent />)}
          </div>
        </InfoWindow>
      </GoogleMap>
    );
  }
}

export default MapWithInfoWindow;