无法在 React js 中从 InfoWindow 调用方法

Question

我试图在单击元素时调用一个方法。 HTML 存储在一个变量中。如下所示：

var cont = '<div class="infocontent" onClick="clickPoly('+index +')" style="width:100px;" >View More</div>';

const clickPoly = (index) => {
   var square = coordinates[index];
  
   if(square != undefined){
      square.dispatchEvent('click');
   }
}

clickPoly()应该调用上面html的onclick。但是当我点击“查看更多”时，它显示“clickPoly is not defined”。

基本上，我在 google 地图上显示多个多边形，悬停在每个多边形上时我显示信息窗口。在 infoWindow 中，我需要显示“查看更多”按钮并显示相关内容。

你可以看到完整的代码 here

Answer 1

clickPoly 需要在 window.

上定义

window.clickPoly = (index) => {
  var square = coordinates[index];

  if (square != undefined) {
    square.dispatchEvent("click");
  }
};

或者，将 HTMLElement 传递给 infowindow.setContent(element) 并在您的组件中添加事件

var cont = '<div class="infocontent2" data-inx="'+index+'" onClick="clickPoly('+index +')" style="width:100px;" >View More</div>';

变成

const cont = document.createElement('div').
cont.classList.add('infocontent2');
cont.addEventListener(() => clickPoly(index));
// add aria-label
cont.style.width = '100px';
cont.innerText = 'View More'

无法在 React js 中从 InfoWindow 调用方法

Not able to call a method from InfoWindow in react js

javascript

google-maps

reactjs