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/）

在InfoWindow内容中使用React组件

2 个答案: