React函数组件中AMap.InfoWindow按钮onclick函数无法触发求助

问题原因 #

• 模板字符串语法错误：你用双引号包裹HTML内容，导致${sayHello}不会被解析为变量插值，而是直接作为字符串输出。浏览器会将onclick的值识别为${sayHello}，点击时尝试调用这个不存在的全局变量，自然没有反应。
• 函数作用域不匹配：就算修正了模板字符串，sayHello是useEffect内部的局部函数，属于组件的闭包作用域。而InfoWindow的HTML内容插入DOM后，onclick事件的执行上下文是全局作用域，根本无法访问到这个局部函数。

解决方案 #

方案一：使用AMap官方事件监听（推荐）

AMap的InfoWindow提供了on方法绑定事件，无需在HTML中直接写onclick，还能避免作用域问题：

const Map = () => {
  // ...
  useEffect(() => {
    const infoWindow = new AMap.InfoWindow({
      content: "<p>Hello</p><button type='submit' id='sayHelloBtn'>Say Hello</button>"
    })
    
    const sayHello = () => {
      console.log("hello")
    }
    
    // 弹窗打开后给按钮绑定点击事件
    infoWindow.on('open', () => {
      document.getElementById('sayHelloBtn').addEventListener('click', sayHello)
    })
    
    // 组件卸载时移除监听，防止内存泄漏
    return () => {
      const btn = document.getElementById('sayHelloBtn')
      if (btn) btn.removeEventListener('click', sayHello)
    }
  }, [])
}

方案二：将函数挂载到全局（不推荐，易造成全局污染）

把sayHello挂载到window对象上，让全局作用域能访问到：

const Map = () => {
  // ...
  useEffect(() => {
    const infoWindow = new AMap.InfoWindow({})
    
    window.sayHello = () => {
      console.log("hello")
    }
    
    // 使用反引号作为模板字符串包裹内容
    infoWindow.setContent(`<p>Hello</p><button type='submit' onclick='sayHello()'>Say Hello</button>`)
    
    // 组件卸载时清理全局变量
    return () => {
      delete window.sayHello
    }
  }, [])
}

内容的提问来源于stack exchange，提问作者Chun Ting Fung