javascript - window.google 在 react 中未定义？

Question

当我调用窗口并控制台记录它时，我得到一个 google prop，如下所示:

然而，当我尝试调用 window.google 时，我得到了未定义的信息。我在这里遗漏了什么吗？

Answer 1

嘿，我在尝试实例化新 window.google.maps.Map 时遇到了类似的问题，并发现此解决方案对我有帮助。

1. 当声明您的<script>时标签，给它一个标识符，以便您稍后可以在组件中获取它。

2. 在安装组件时，设置 load Google 脚本上的事件监听器，并等待其准备就绪后再执行任何其他代码。

3. 需要注意的是，如果您的脚本在该组件安装(这是我们首先希望的)并设置事件监听器之前加载，则不会发生任何事情。我们希望用 if (window.google) 捕捉这种积极的情况。

componentDidMount() {
  const googleScript = document.getElementById('google-map-script')

  if (window.google) {
    // All is good! Carry on 
  }

  googleScript.addEventListener('load', () => {
    // Patiently waiting to do the thing 
  })
}