Populating Google Maps infowindow with React renderToString

问题

I am building a GoogleMaps Polygon widget in React JS and want to populate the infowindow with a react component because I need some more complex HTML hierarchy, adding a button in it. I looked on StackOverflow because I wasn't sure how to get the innerHTML of a React component and found this:

How to use a react component for showing Google Maps InfoWindow

But after implementing I am getting an error on the renderToString function every first time a Polygon is being clicked, see below.

Does anybody have any idea of what might be causing this?

TypeError: Cannot read property 'getCurrentStack' of undefined
   at pushCurrentDebugStack (react-dom-server.browser.development.js:2974)
   at ReactDOMServerRenderer.read (react-dom-server.browser.development.js:3683)
   at Object.renderToString (react-dom-server.browser.development.js:4297)
   at GoogleMapsContainer.<anonymous> (GoogleMapsContainer.tsx:319)

The way I have implemented it is by defining the React component and getting the innerHTML of it and feeding it to the Google Maps InfoWindow object as per below:

interface InfoWindowProps {
    className: string;
    onClickButtonLabel: string;
    onClickAction:ListActionValue;
    mxObject: ObjectItem;

}
const InfoWindowContent = (props:InfoWindowProps) => {
    
    return (<button className={props.className}>
        <span className={"glyphicon glyphicon-share-alt"}>
        </span>      
        <text style={{marginLeft:"4px"}}>
            {props.onClickButtonLabel}
        </text>
    </button>)
};
maps.event.addListener(infowindow, 'domready', ( () => { 
    // infowindow object is loaded into DOM async via Google, hence need to target the domready event
    const infoWindowContent = InfoWindowContent(infoWindowProps);
    const infoWindowContentString = renderToString(infoWindowContent);

    infowindow.setContent(
        infoWindowName + '<br><br>' + infoWindowContentString
    )

}).bind(this));

来源：https://stackoverflow.com/questions/65793616/populating-google-maps-infowindow-with-react-rendertostring

标签

javascript

reactjs

google-maps

react-dom