从进入信息窗口 Google 地图对象的 DOM 字符串执行函数时出现问题答案

【问题标题】：Problem executing function from DOM string that goes inside info window Google map object从进入信息窗口 Google 地图对象的 DOM 字符串执行函数时出现问题
【发布时间】：2020-04-13 22:19:43
【问题描述】：

我为此使用了一个 React 类。我声明了一个空字符串（内容），我将把它传递给 InfoWindow Google 地图对象（在里面我有一个带有 onClick 事件的按钮）。如果这样称呼它：

const content = '<button onClick={'+ this.myFunction(myArg) +'}></button>'

当我加载页面时，即使我没有按下按钮，该功能也会被执行。

如果我这样称呼它：

const content = '<button onClick={'+ (() => this.myFunction(myArg)) +'}></button>'

我明白了

Uncaught SyntaxError: Unexpected end of input.

这是我声明内容的函数：

showMarker(visit){
  const content = '';
  //Some validations to fill content, for example
  if(visit.boolean){
    content += '<small>' + visit.something + '</small>' //Here concatenation works well
  }
    
  const content += '<button onClick={ this.myFunction(visit) }></button>'
  //Create marker object
  const infowindow = new google.maps.InfoWindow({ content });
}

这是来自 onClick 事件的函数：

myFunction(visit){
  console.log(visit);
}

【问题讨论】：

const content = '<button onClick={ this.myFunction(myArg) }></button>'怎么样
您使用content的具体情况如何？无论如何，该函数必须是字符串文本的一部分：const content = '<button onClick={() => this.myFunction(myArg)}></button>'
我尝试了这两个答案，它们都有效，但函数没有获取参数。我试图连接它'<button onClick={ this.myFunction(' + myArg + ') }></button>'，但我得到了 Uncaught SyntaxError: Unexpected token ')'。这就是我使用内容的方式：const infowindow = new google.maps.InfoWindow({ content });`
@MiguelNoriega 显示更多您的代码，以便我们测试并提出解决方案
我更新了问题，谢谢@Ivan86

标签： javascript reactjs

【解决方案1】：

你试过去掉外括号吗？

const content = '<button onClick={'+ () => this.myFunction(myArg) +'}></button>'

你是否在构造函数中运行this.myFunction = this.myFunction.bind(this);？

您可以将 myFunction 声明为 lamda，这样您就不必绑定它。

myFunction = (visit) => {
   console.log(visit);
}

【讨论】：