Google maps Infowindow未显示在使用ReactJS制作的地图应用程序上

我正在使用ReactJS并创建一个GoogleMaps组件，它运行得相当好，但当我点击时信息窗口不会显示出来。这是否与React消费事件的方式有关？有关守则如下：

var MapContainer = React.createClass({
map: null,
infowindow:null,
createMarker: function(place){
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
    map: this.map,
    position: place.geometry.location
    });
    google.maps.event.addListener(marker, 'click', function() {
    this.infowindow.setContent(place.name);
    this.infowindow.open(map, marker);
    });
},
componentDidMount: function(){
    var center = new google.maps.LatLng(this.props.locationProp.lat, this.props.locationProp.lng);
    this.map = new google.maps.Map(this.refs.map_canvas, {center: center, zoom: 15});
    var request = {
        location: center,
        radius: 500,
        types: ['restaurant']
    };

    this.infowindow = new google.maps.InfoWindow();
    service = new google.maps.places.PlacesService(this.map);
    service.nearbySearch(request, this.mapCallBack);

},
mapCallBack: function(results, status){
 if(status === google.maps.places.PlacesServiceStatus.OK){
    this.setState({resultsState: results});
    for (var i = 0; i < results.length; i++) {

        this.createMarker(results[i]);
    }
 },
 render: function(){
    return(
        <div className="mapAndListContainer">
            <div ref="map_canvas" className="mapCanvas">
            </div>
            <ListSorter propertyResults />
        </div>
        );
 }
});

var-MapContainer=React.createClass({
map:null，
信息窗口：空，
createMarker:函数（位置）{
var placeLoc=place.geometry.location；
var marker=new google.maps.marker({
map:this.map，
位置：place.geometry.location
});
google.maps.event.addListener（标记'click'，函数（）{
this.infowindow.setContent（place.name）；
this.infowindow.open（地图、标记）；
});
},
componentDidMount:function（）{
var center=new google.maps.LatLng（this.props.locationProp.lat，this.props.locationProp.lng）；
this.map=new google.maps.map（this.refs.map_canvas，{center:center，zoom:15}）；
var请求={
地点:中环，
半径：500，
类型：[“餐厅”]
};
this.infowindow=new google.maps.infowindow（）；
service=newgoogle.maps.places.PlacesService（this.map）；
service.nearbySearch（请求，this.mapCallBack）；
},
mapCallBack:函数（结果、状态）{
if（status==google.maps.places.PlacesServiceStatus.OK）{
this.setState（{resultstate:results}）；
对于（var i=0；i

由于某些原因，infoWindow引用正在丢失。作为权宜之计，一个简单的修复方法是在其他实体上重新设置infoWindow的父级。在下面的示例中，我已将其重新设置为Windows的父级-

var MapContainer = React.createClass({
map: null,
infowindow:null,
createMarker: function(place){
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
    map: this.map,
    position: place.geometry.location
    });
    google.maps.event.addListener(marker, 'click', function() {
    window.infowindow.setContent(place.name);
    window.infowindow.open(this.map, marker);
    });
},
componentDidMount: function(){
    var center = new google.maps.LatLng(this.props.locationProp.lat, this.props.locationProp.lng);
    this.map = new google.maps.Map(this.refs.map_canvas, {center: center, zoom: 15});
    var request = {
        location: center,
        radius: 500,
        types: ['restaurant']
    };
    window.infowindow = new google.maps.InfoWindow();

    var service = new google.maps.places.PlacesService(this.map);
    service.nearbySearch(request, this.mapCallBack);

},
mapCallBack: function(results, status){
console.log(results);
console.log(status);
 if(status === google.maps.places.PlacesServiceStatus.OK){
    this.setState({resultsState: results});
    for (var i = 0; i < results.length; i++) {

        this.createMarker(results[i]);
    }
 }
},
render: function(){
    return(
        <div className="mapAndListContainer">
            <div ref="map_canvas" className="mapCanvas" style={{width:600, height:600}}>
            </div>
        </div>
        );
 }
});

setTimeout(function(){
ReactDOM.render(
    <MapContainer locationProp={{lat:33.808678, lng:-117.918921}}/>,
    document.getElementById('container')
)}, 4000);

var-MapContainer=React.createClass({
map:null，
信息窗口：空，
createMarker:函数（位置）{
var placeLoc=place.geometry.location；
var marker=new google.maps.marker({
map:this.map，
位置：place.geometry.location
});
google.maps.event.addListener（标记'click'，函数（）{
window.infowindow.setContent（place.name）；
window.infowindow.open（this.map，marker）；
});
},
componentDidMount:function（）{
var center=new google.maps.LatLng（this.props.locationProp.lat，this.props.locationProp.lng）；
this.map=new google.maps.map（this.refs.map_canvas，{center:center，zoom:15}）；
var请求={
地点:中环，
半径：500，
类型：[“餐厅”]
};
window.infowindow=new google.maps.infowindow（）；
var service=newgoogle.maps.places.PlacesService（this.map）；
service.nearbySearch（请求，this.mapCallBack）；
},
mapCallBack:函数（结果、状态）{
控制台日志（结果）；
控制台日志（状态）；
if（status==google.maps.places.PlacesServiceStatus.OK）{
this.setState（{resultstate:results}）；
对于（var i=0；i

尝试全局初始化infowindow，infowindow:new google.maps.infowindow（）@JerryChen:刚刚做了。结果是一样的。我不认为全局初始化是问题。我怀疑答案与React允许内联渲染的内容有关。我让上面的两个程序都工作了，并且在我的程序中使用了您的方法。似乎将infowindow设置为全局是解决方案：）看起来有点不对劲，但我认为这这是因为GoogleMapsAPI并不适合ReactJS。