在InfoWindow内容中使用React组件

Question

目前我正在使用google-maps api开发页面。 我在实施InfoWindow时遇到了问题。 我想在React Component的内容中使用InfoWindow，如下所示..

const infoWindow = new google.maps.InfoWindow({
    content : <MyComponent />,
    position : { lat : ..., lng : ... }
})

infoWindow.open(map);  

实际上，我使用renderToString如下

const infoWindow = new google.maps.InfoWindow({
    content : renderToString(<MyComponent />),
    position : { lat : ..., lng : ... }
})

infoWindow.open(map);

这是相当不错。但我不能在<MyComponent />中使用任何函数，如lifecycle api ..

那么，有没有好的方法在InfoWindow中使用React Component？

Answer 1

我解决了以下问题，但我不确定并且有点接线......

const myComponent = <MyComponent />;
const infoWindow = new google.maps.InfoWindow({
    content : renderToString(myComponent),
    position : { lat : ..., lng : ... }
})

infoWindow.open(map);

setTimeout(() => {
   ReactDOM.render(myComponent , $('.gm-style-iw > div > div').get(0));
}, 100);

Answer 2

React Google Maps是一个很棒的文档库（https://tomchentw.github.io/react-google-maps/）